以叠加格式定位两个图像

Question

我有两张图片需要并排放置。
这是图像 1 现在的样子，使用以下代码：

            <section id="4" class="pt-sm-3 pt-md-5 pb-2">
            <div class="row text-center">
                <div class="col-md-1">
                </div>
                <div class="col-md-3">
                    <img class="lazyload img-responsive product-images"
                         style="max-width: 100%; height: auto; margin: 0 auto;"
                         data-src="@Url.Content("./redImage.png")"
                         src="@Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
                </div>
                <div class="col-md-3">
                    <img class="lazyload img-responsive product-images"
                         style="max-width: 100%; height: auto; margin: 0 auto;"
                         data-src="@Url.Content("./blueImage.png")"
                         src="@Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
                </div>
            </div>
        </section>

我想让图像像下面这样相互叠加：我将如何在 CSS 中进行设置？我尝试使用 this approach 但无法使图层正确适合。请帮忙。谢谢！

Answer 1

将 position: relative; transform: translateX(-50px) translateY(-50px); z-index: -1; 作为样式添加到第二张图片可能是一个快速解决方案。（您可能需要修改 translateX/translateY 值以将它们放在您需要的位置 - 页面上的其他元素不会受到此转换的影响）

Answer 2

你应该使用负边距来制作这些东西我将 class 设置为 col-md-3，称为 overlay，并在 style.css 上设置了样式希望这有效

.overlay {
    margin-right: -100px;
}

<link rel = "stylesheet" href="style.css">
 <section id="4" class="pt-sm-3 pt-md-5 pb-2">
            <div class="row text-center">
                <div class="col-md-1">
                </div>
                <div class="col-md-3  overlay">
                    <img class="lazyload img-responsive product-images"
                         style="max-width: 100%; height: auto; ;"
                         data-src="@Url.Content("./redImage.png")"
                         src="https://wallpapercave.com/wp/wp3260204.jpg" />
                </div>
                
                <div class="col-md-3">
                    <img class="lazyload img-responsive product-images"
                         style="max-width: 100%; height: auto; ;"
                         data-src="@Url.Content("./blueImage.png")"
                         src="https://cdn.wallpapersafari.com/44/96/ow6U0D.jpeg" />
                </div>
            </div>
        </section>
        </section>

以叠加格式定位两个图像

positioning two images in an overlay format

css

image

css-position