时间戳

首页 > 解决方案 > 以叠加格式定位两个图像

css - 以叠加格式定位两个图像

问题描述

我有两个图像需要并排分层。
这就是图像 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 中进行设置？我尝试使用这种方法，但无法使图层正确适合。请帮忙。谢谢你！

标签： cssimagecss-position

解决方案

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

推荐阅读