如何使用css添加边框底部图像

Question

我创建了以下图像以在我网站的所有 h1 标题标签下呈现。问题是，我在网上找到的每个教程都将边框图像属性作为全方位边框进行讨论。

我想要实现的只是在标题下放置一个小图像，一次。没有重复。居中。根据这个http://www.css3.info/preview/border-image/有一个名为 border-bottom-image 的属性。但我似乎无法让它正确显示。

谷歌浏览器开发者工具告诉我这是一个未知的属性名称。如果我无法使用以下 css3 实现这一点，我该如何实现？

.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}

Answer 1

这里有两个选项可以让你做你想做的事，而不必求助于border-image，这并不是真正为你想做的事情而构建的。

背景图像 + :after

这使用伪元素 ( :after) “插入”一个块，其中包含给定的图像作为background-image. 我认为这可能比下一个选项更好，因为它对元素样式的破坏最小。

.entry-title:after {
    content: "";
    display: block;
    height: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;
}

http://jsfiddle.net/mh66rvbo/2/

背景图像 + 填充

这padding-bottom用于为图像腾出空间，然后沿元素底部粘贴图像，定位在中心。

.entry-title {
    padding-bottom: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;
}

http://jsfiddle.net/mh66rvbo/1/