Border-image au dessus de son élément

Version imprimable

04/08/2015, 15h44
Daïmanu

2 pièce(s) jointe(s)

Border-image au dessus de son élément
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:

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:

1 2 <div id="test1"><img src="back.png" /></div>
back.png est l'image verte, border.svg est le cadre marron : Pièce jointe 184617

Je souhaiterai que la partie verte soit sous le cadre, pour simuler un album photo Pièce jointe 184618
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.
04/08/2015, 16h06
Jacques Beauregard

Bonjour,

Question conne : pourquoi ne pas superposer les 2 images et jouer avec z-index?
04/08/2015, 16h12
Daïmanu

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

Bonjour,

Citation:

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:

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.

05/08/2015, 09h44
Daïmanu

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 ?
05/08/2015, 12h03
NoSmoking

• 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.

Citation:

Merci NoSmoking, ça fonctionne.

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