Hinzufügen eines border-bottom-image mit css
Erstellt habe ich das folgende Bild gerendert werden soll unter allen h1 title-tags in meine website. Das Problem ist, jedes tutorial finde ich online diskutiert border-image-Eigenschaft als ein rundum-Grenze.
Alle, die ich erreichen möchte, ist dieses eine kleine Bild unter dem Titel, einmal. Keine Wiederholung. zentriert. Nach dieser http://www.css3.info/preview/border-image/ gibt es die Eigenschaft border-bottom-image. Aber ich kann nicht scheinen, um es richtig angezeigt.
Google chrome developer tools sagt mir, dass dies eine unbekannte Eigenschaft name. Wenn ich nicht erreichen können Sie dies mit dem folgenden css3, wie kann ich es erreichen?
.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}
- Sie könnten versuchen, Einstellung, es als Grenze Bild, wie dir die tutorials verwiesen wird, zeigen, wie, dann nur mit der unteren Grenze der Dicke größer als null ist.
- Versuchen
-webkit-border-bottom-image
oder die Verwendung pseudo-element:after
- Ich glaube nicht, dass
border-image
ist, was Sie wollen, vor allem, weil diecenter no-repeat
Richtlinie, die Sie wollen, ist nicht unterstützt (so wie du es willst;stretch
am nächsten ist, aber es ist nicht wirklich dasselbe). Dies ist so nah wie ich kam: jsfiddle.net/mh66rvbo Sie könntenbackground-image
statt, mit einem bottom-padding, wenn das nicht zu stören, andere hintergrund-Stile auf Elemente. Finden Sie diese sehr erklärende Eintrag von CSS-Tricks: css-tricks.com/understanding-border-image - Hier ist ein weiterer StackOverflow-thread, fragt dieser: "stackoverflow.com/questions/10164393/...
- Haben Sie versucht
border-bottom-style: solid;
? - Konnte verwenden Sie ein div mit einem Hintergrundbild? w3schools.com/cssref/pr_background-position.asp
- Eine andere version von
background-image
mit:after
: jsfiddle.net/mh66rvbo/2 - Normalerweise ist es nicht leicht, eine Grenze-Bild so zu arbeiten, wie Sie möchten, und es ist nicht gut unterstützt, warum nicht mit background-image? schnelle demo - jsfiddle.net/pxra15wL
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier sind zwei Optionen, die es Ihnen ermöglichen, zu tun, was Sie wollen, ohne Rückgriff auf
border-image
, die nicht wirklich gebaut für das, was Sie tun möchten.hintergrund-Bild + :nach
Diese verwendet ein pseudo-element (
:after
) auf "einfügen" einen block mit Ihrem Bild alsbackground-image
. Ich denke, das ist wahrscheinlich besser als die nächste option, da es am wenigsten störend für die element-styling.http://jsfiddle.net/mh66rvbo/2/
background-image + padding
Diese verwendet
padding-bottom
Platz zu machen, für das Bild, klebt dann das Bild entlang der Unterseite des Elements, die Positionierung in der Mitte.http://jsfiddle.net/mh66rvbo/1/
Aus dem link, den Sie (http://www.css3.info/preview/border-image/)
Pro mein Verständnis, "border-bottom-image" immer noch nicht funktioniert in der neuesten version von Google Chrome (nativ). Aber "border-image" nicht. Und definieren Sie die Breite für jedes einzelne Teil unter Verwendung der (oben rechts unten Links) Protokoll:
CSS:
Details: http://www.w3schools.com/cssref/css3_pr_border-image.asp
border-image-repeat: none
ist nicht ein Gültiger Wert.border-bottom-image-Eigenschaft funktioniert nicht in css3 freundlich
ich möchte wissen, wie können wir verwenden das Bild in der unteren Grenze
teilen Sie die Art und Weise, und beheben Sie diese