css - 如何将背景图像效果添加到 div 中？

Question

我需要将以下详细图像添加到页面上某个类的每个 div 中。

在线框图中，它看起来像这样:

我不能完全使用上面的图像，因为空白可以是可变的高度。我如何使用CSS中的背景图像属性来实现这一点？到目前为止我所尝试的一切都不起作用。有什么想法吗？

Answer 1

您可以将 :after 与绝对定位结合使用。

参见: http://jsfiddle.net/thirtydot/ChJnr/4/

HTML:

<div class="box"></div>

CSS:

.box {
    width: 250px;
    background: #ccc;
    position: relative;
    padding: 16px;
}
.box:after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -16px;
    background: url(http://dummyimage.com/250x16/f0f/fff);
    height: 16px;
}

如果您需要它在旧版浏览器中工作，您可以改为 add a harmless little span替换 :after 的使用。