CSS中元素的重叠

发布于10月08日

我必须实现下面给出的设计，在这个设计中，手机的图像既在橙色背景中，也在橙色背景之外.顶部是背景之外，底部是内部.

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

你知道如何实现这一点吗？

这是手机的完整图片

推荐答案

这里有三个替代方案，第一个很管用，第二个和第三个更通用；它们可以用于各种剪裁形状.

Option 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个

Option 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/个

Option 3:您可以通过使用SVG剪辑路径#RoundedBottomMask作为CSSclip-path的源来组合这两种方法.