CSS中元素的重叠答案

【问题标题】：Overlapping of elements in CSSCSS中元素的重叠
【发布时间】：2022-10-23 13:02:51
【问题描述】：

我必须实现下面给出的设计，其中手机的图像在橙色背景的内部和外部。在顶部它在背景之外，在底部它在里面。

如果我在这里使用 z-index，那么手机的图像可以完全在背景内部或完全在外部。

知道如何实现吗？

这是手机的完整图片

【问题讨论】：

标签： css sass flexbox css-selectors

【解决方案1】：

这里有三种选择，第一种可以解决问题，第二种和第三种更通用；它们可用于各种剪裁形状。

选项1：在 CSS 中，您可以使用两个重叠的手机图像：

内部图像被其包装 div 的圆形剪裁在底部。这是通过border-radius 和overflow: hidden 完成的。

外部图像（顶部）使用矩形围绕其垂直中间进行裁剪。

因此，您将分别从外部和内部两个图像中看到手机的上半部分和下半部分。

.out {
  margin-top: 40px;
  position: relative;
}

.out>img {
  position: absolute;
  top: -30px;
  clip-path: inset(0 0 90px 0);
}

.inner {
  position: relative;
  overflow: hidden;
  background: orange;
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

.inner img {
  position: absolute;
  top: -30px;
}

<div class="out">
  <div class="inner">
    <img width="200" src="https://i.stack.imgur.com/aMrYZ.png" />
  </div>

  <img width="200" src="https://i.stack.imgur.com/aMrYZ.png" />
</div>

https://jsfiddle.net/efortis/2dv5qkmg

选项 2：SVG，其中只有图像，手机的剪贴蒙版是自定义形状。对于您的情况，形状是矩形加上底部的半圆：

  +------+
  |      |
  |      |
  +-    -+
    __/

<svg width="350" height="350" version="1.1" viewBox="0 0 350 350" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <defs >
    <clipPath clipPathUnits="userSpaceOnUse" id="RoundedBottomMask">
      <path d="m -1,-0.4 v 196 h 50 a 125,125 0 0 0 125,120 125,125 0 0 0 125,-120 h 51.9 v -196 z" fill="#ee7500"/>
    </clipPath>
  </defs>
  <circle
    id="clip"
    cx="173.8"
    cy="190.10001"
    r="125"
    fill="orange"
    />
  <image
    width="224.42018"
    height="290.29099"
    preserveAspectRatio="none"
    xlink:href="https://i.stack.imgur.com/aMrYZ.png"
    x="49.370064"
    y="24.956205"
    clip-path="url(#RoundedBottomMask)"/></svg>

https://jsfiddle.net/efortis/5w0rm27b/1/

选项 3：您可以使用 SVG 剪辑路径 #RoundedBottomMask 作为 CSS clip-path 的源来组合这两种方法。

例如：https://stackoverflow.com/a/74168748/529725

【讨论】：

它正在工作，但质量有点低。我喜欢 SVG 的

【解决方案2】：

这是一个仅使用图像的想法：

img {
  width: 200px;
  border-radius: 0 0 999px 999px;
  background: 
   radial-gradient(50% 50%,orange 99%,#0000) 
   bottom/100% 71% no-repeat;
}

&lt;img src="https://i.stack.imgur.com/aMrYZ.png"&gt;

【讨论】：

【解决方案3】：

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 800px;
  height: 900px;
  border-bottom-left-radius: 999px;
  border-bottom-right-radius: 999px;
  overflow: hidden;
}

.img {
  height: 900px;
  justify-self: center;
  position: relative;
  grid-row: 1  2;
  grid-column: 1  2;
  z-index: 2;
}

.img-bg {
  height: 800px;
  width: 800px;
  border-radius: 50%;
  align-self: flex-end;
  grid-row: 1  2;
  grid-column: 1  2;
  position: relative;
  background-color: #e66f2a;
}

<div class="wrapper">
  <img src="https://i.stack.imgur.com/aMrYZ.png" class="img" />
  <div class="img-bg"></div>
</div>

主要的收获是使用border-bottom-left-radius、border-bottom-right-radius 和overflow: hidden。

希望能帮助到你。

【讨论】：