Border-image au dessus de son élément

**Daïmanu** · 04/08/2015, 15h44

Bonjour.

J'aimerais savoir si il est possible qu'un border-image soit placé au dessus de son élément.
Voici ce que je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#test1 {
	border: 40px solid transparent;
	border-image: url("border.svg") 60 round;
	display: inline-block;
}
#test1 img {
	margin: -30px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="test1"><img src="back.png" /></div>

back.png est l'image verte, border.svg est le cadre marron : Nom : forum0.png
Affichages : 410
Taille : 672 octets

Je souhaiterai que la partie verte soit sous le cadre, pour simuler un album photo Nom : forum1.png
Affichages : 387
Taille : 982 octets

J'ai choisi d'utiliser un border-image car la taille de la photo pourra varier, mais le cadre s'adaptera automatiquement.

Est-ce que c'est possible ?

Cordialement.

**Jacques Beauregard** · 04/08/2015, 16h06

Bonjour,

Question conne : pourquoi ne pas superposer les 2 images et jouer avec z-index?

**Daïmanu** · 04/08/2015, 16h12

Tout simplement parce que la taille des images peuvent varier, et le bord a une taille fixe, d'où l'utilisation de border-image.

**NoSmoking** · 04/08/2015, 19h29

Bonjour,

J'aimerais savoir si il est possible qu'un border-image soit placé au dessus de son élément.

une bordure -image appartient à la bordure donc par définition elle restera autour du cadre.

Tu peux néanmoins ruser en utilisant un pseudo-élément :before et en reportant sur lui la bordure-image.

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>[CSS3]Border-image par dessus</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main{
  width:60em;
  margin:0 auto;
}
h1{
  color: #006699;
}
#test{
  position:relative;
  display:inline-block;
}
#test:before{
  position:absolute;
  content:"";
  right:0;
  bottom:0;
  left:0;
  top:0;
  border-style: solid; border-width: 26px;
  border-image: url(http://torgar.developpez.com/articles/css/bordures-css3/images/border-image.png) 26 round;
}
</style>
</head>
<body>
<div id="main">
  <h1>Border-image par dessus</h1>
  <div id="test">
    <img src="http://www.developpez.net/template/images/logo.png">
  </div>
</div>
</body>
</html>

le positionnement de la bordure-image peut s'ajuster via les propriétés top-right-bottom-left.

**Daïmanu** · 05/08/2015, 09h44

Merci NoSmoking, ça fonctionne.

Néanmoins, je ne serais pas contre quelques explications.

Si j'ai bien compris, le pseudo élément :before créé un élément à la volée qui se place au dessus de l'image.
Par contre, un positionnement absolu ne devrait-il pas se faire par rapport au document ? À moins que la position relative du div n'aie une influence sur les enfants ?

**NoSmoking** · 05/08/2015, 12h03

• Les pseudo-éléments :before et :after, crée un élément qui n'apparaît pas dans le DOM et qui doit être réservé à un but purement décoratif ou presque.

• Cet élément dépend du sélecteur qui la mis en place, dans le cas de l'exemple la <div id="test">, par défaut cet "élément", qui est en display:inline, se place à l'intérieur donc de son parent.

• On peut tout à fait le mettre en forme, entre autres dimension et position, via le CSS et dans ce cas il est régit par les mêmes règles.

• Concernant la position:absolute, on applique la règle, par rapport au premier parent positionné, donc il faut mettre la <div id="test"> en position:relative pour qu'elle puisse servir de référent.

Merci NoSmoking, ça fonctionne.

Pense dans ce cas à passer la discussion en résolu

Border-image au dessus de son élément [CSS 3]

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager