在响应式环境中叠加两个图像

Question

我想看看是否有办法将促销标签叠加到 div 上。另外，我想确保它在响应式环境中响应。我试过 position:absolute 但我必须创建大量媒体查询断点才能执行此操作。

<div class="col-md-3 col-sm-4 col-xs-12">
    <div class="category-item">
        <div class="sale-tag">
        <img src="/sale-tag.png"></div>
        <div class="item-image">
            <a href="xxxx"><img src="xxxx.jpg" alt="xxxx" class="img-responsive"></a>
        </div>
        <div class="item-details">
            <h5><a href="xxxx">
                <h4>XXXX</h4>
                XXXX</a></h5>
            <hr class="product-item">
            <div class="item-price">$XX.00</div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

.category-item {
    min-height: 290px;
    height: auto;
    max-height:none;
    max-width: 250px;
    margin: 15px 0px 15px 0px;
    background-color:#fff;
    box-shadow: 1px 1px 1px 1px #ccc;
    border-radius:2px;
}
.sale-tag {
    position:absolute;
    left:16px;
    top:16px;
    z-index:23;
}

Answer 1

这是否符合您的需求。

<img style="background:url(image.jpg)" src="overlay_image.gif" alt="xxxx" class="img-responsive" />

Answer 2

.category-item 应该有 position: relative; 才能工作。

我给你做了一个DEMO。

在响应式环境中叠加两个图像

Overlay two images in a responsive environment

html

css

overlay

image