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);
}

Hinzufügen eines border-bottom-image mit css

  • 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 die center 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önnten background-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

Schreibe einen Kommentar