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

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



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



我不能只使用上面的图像，因为空白可以是可变高度。如何使用CSS中的background image属性实现此目的？到目前为止，我尝试的所有操作均无效。有任何想法吗？

最佳答案

您可以将: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的使用。