css - 为自定义形状的图像 overflow hidden

Question

这是 2 个图像层:

拿着电话和黑洞的手。

HTML 标记:

<div class="wrapper">
  <img class="wrapper__image" src="path/to/image.png">
</div>

SCSS:

.wrapper {
  background: url("path/to/blackhole.png") no-repeat center bottom;
  width: 528px;
  height: 600px;
  overflow: hidden;

  &__image {
    margin-left: 60px;
    margin-top: 5px;
  }
}

如您所见，带有电话的手图像在底部有点圆，还有一个黑洞是圆的，所以如果我将手推到 wrapper div 之外，就会有空格在底部的手的图像上。

有没有办法 Handlebars 的图像推到黑洞下面隐藏起来，黑洞图像上没有透明 Angular :

如果黑洞是正方形，那就没有问题了。

我的目的是把拿着手机的手藏在一个黑洞里，就像它从洞里滑下来一样。

Answer 1

我会使用纯 CSS 创建孔，您将能够获得所需的效果。

悬停鼠标查看效果。您只需调整颜色，使其看起来像您的图像。

.hole {
  width: 300px;
  height: 300px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-bottom-right-radius: 50% 50px;
  border-bottom-left-radius: 50% 50px;
}

.hole::before {
  content: "";
  position: absolute;
  z-index: -1;
  height: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  background: radial-gradient(farthest-side at top right, grey, black);
}

img {
  position:absolute;
  top:0;
  left:100px;
  transition:2s all;
}
.hole:hover img {
  top:100%;
}

<div class="hole">
  <img src="https://picsum.photos/100/200?image=1069">
</div>