Question

我们有一些html模板，通常编码如下：

<div class="image">
    <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png" height="50" width="100"/>
    <div class="credit">credit</div>
    <div class="caption">caption</div>
</div>

为了清楚起见，.image div包含img元素，可能包含.credit和.caption div

这里是我的问题所在。我们的设计规范有一个应用于img元素的背景图像 - 应该是包含框的全宽。我的自由职业者将模板编码错误，背景应用于整个.image div - 包括元数据（标题和信用）。直到现在，当我们关掉背景图片时，我才意识到这一点。

我想知道是否有任何方法可以使用css伪元素来解决这个问题。我尝试了一下，但我无法完成任何事情。

虽然我可以将所有模板重新编码为以下内容，但我希望避免使用它：

<div class="image">
    <div class="image-backgrounded">
        <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png" height="50" width="100"/>
    </div>
    <div class="image-meta">
        <div class="credit">credit</div>
        <div class="caption">caption</div>
    </div>
</div>

我在网上扔了一个jsfiddle以显示问题 - http://jsfiddle.net/jHmR7/2/

Answer 1

.image {
    width: 400px;
    min-height: 100px;
    text-align: center;
}
.image img {
    background: #CCC;
    padding: 0px 37%; // adjust padding to fit properly based on image size

}

假设：图片的宽度相同

如果不是图像必须调整到相同的宽度，那么这个技巧将正常工作。

.image img {
        background: #CCC;
        padding: 0px 37%; // adjust padding to fit properly based on image size
        width : 40%; // define fixed width for images
    }

CSS - 是否可以使用伪元素包装背景图像？

1 个答案: