如何将这种背景图像效果添加到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的使用。

Answer 2

2个选项：

选项1：你制作3个div，看起来像这样：

<div class="container">
<div class="content">Stuff</div>
<div class="bottom"></div>
</div>

由于您对底部图像使用透明图像，因此需要确保没有为容器div设置背景颜色，而是将其设置为内容div。

选项2：使用CSS3 border-image属性。

这样做的一个缺点是，用于底部边框的图像必须具有与其顶部的div背景相同的颜色背景。例如：

透明背景：http://jsfiddle.net/charlescarver/k9uyx/

这也要求浏览器支持CSS3。

Answer 3

.someClass {
    backgroung-image: url('path-to-image-form-css-file');
    height: 100px;
    width: 100px;
    padding: ...
}

Answer 4

将其分为3个div - 一个包含整个“原始”div，一个div浮动到容器div的底部以保存底部图像，另一个包含其他所有内容。

Answer 5

就个人而言，我会创建一个这样的类。这是猜测，但我相信这应该可行：

.someClass {
    background: #FFF url('path') no-repeat center bottom;
    width: 175px;
}