Question

我已成功在另一张图片上显示图片，如下所示：

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="image-with-overlay">
            <div class="shop-now-overlay">
                <img src="img/btn_shop_now.png">
            </div>
            <img src="img/left_image.jpg"/>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="image-with-overlay">
            <div class="shop-now-overlay">
                <img src="img/btn_shop_now.png">
            </div>
            <img src="img/right_image.jpg"/>
        </div>
    </div>
</div>

这就是我的样式表的样子：

.image-with-overlay {
  position: relative;
}
.image-with-overlay .shop-now-overlay {
  position: absolute;
  z-index: 10;
  bottom: 0;
  right: 0;
  padding-bottom: 30px;
  padding-right: 30px;
}

但是我希望我的页面能够响应，当然，每当我将浏览器调整得更小并且图像显示在单个列（col-sm-12）上时，覆盖按钮就会显示在图像外部并占据宽度这页纸。关于如何限制图像叠加的任何想法，即使屏幕较小，也只能环绕图像？

Answer 1

看起来responsive.css让它变得静止！你能试试!important吗？我不推荐这个，但检查没有受伤。

.image-with-overlay {
    position: relative !important;

    .shop-now-overlay {
        position: absolute !important;
        z-index: 10;
        bottom: 0;
        right: 0;
        padding-bottom: 30px;
        padding-right: 30px;
    }
}

Answer 2

尝试删除padding元素并尝试使用left和right : 30px

处理该位置

.shop-now-overlay {
        position: absolute;
        z-index: 10;
        bottom: 0;
        right: 0;        
}

响应图像叠加在另一个图像中

2 个答案: