时间戳

首页 > 解决方案 > 创建四个互相覆盖的 2v2

html - 创建四个互相覆盖的 2v2

问题描述

我的 img 标签有问题。我有两个具有我想要的确切位置的响应式 img。

代码[图像是圆形和透明的[png]]：

<div class="row" style="margin:auto; display:flex;">
    <img style="margin-left: 0%;margin-top: 8%;height: 60%;object-fit: contain;" class="img-responsive" src="~/Images/p1.png" />
    <img style="margin-left: 0%;margin-top: 0%;height: 60%;object-fit: contain;" class="img-responsive" src="~/Images/p2.png" /> 
</div>

我想再添加两个响应式 img，以便始终覆盖我在上面制作的两个 img：

像这样的东西：

<div class="row" style="margin:auto; display:flex;">
    <img style="margin-left: 0%;margin-top: 8%;height: 60%;object-fit: contain;" class="img-responsive" src="~/Images/p1.png" />
    <img style="margin-left: 0%;margin-top: 0%;height: 60%;object-fit: contain;" class="img-responsive" src="~/Images/p2.png" />
    <img style="margin-left: 0%;margin-top: 8%;height: 60%;object-fit: contain;" class="img-responsive" src="~/Images/p1-1.png" />
    <img style="margin-left: 0%;margin-top: 0%;height: 60%;object-fit: contain;" class="img-responsive" src="~/Images/p2-2.png" />
</div>

但我对创建它们没有任何想法。你能帮我处理吗？

标签： htmlcss

解决方案

推荐阅读