html - 如何使用 css 添加 border-bottom-image

Question

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

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

Google chrome 开发人员工具告诉我这是一个未知的属性名称。如果我无法通过以下 css3 实现，我该如何实现？

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

Answer 1

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

背景图片 + :after

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

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