CSS剪辑一个图像，然后将另一个图像作为边框

Question

可以在这里找到Similair问题：

CSS: How to fit an image in a circle where bottom is clipped but top pops out?

但是，我想用图像代替红色轮廓，例如：

我在psuedo标记中尝试了：before和：after之后，但没有找到解决方法。我应该朝哪个方向实现？

Answer 1

您可以像这样使用多个背景：

ClusterRoleBinding

.box {
 width:200px;
 height:210px;
 border-radius: 0 0 50% 50%/0 0 70% 70%;
 background:
  url(https://i.stack.imgur.com/bdZeE.png) center/cover, 
  url(https://i.stack.imgur.com/i7iHM.png) 0 180%/100% auto no-repeat;
 position:relative;
}
.box:after {
  content:"";
  position:absolute;
  z-index:1;
  bottom:0;
  top:50%;
  left:0;
  right:0;
  background:url(https://i.stack.imgur.com/i7iHM.png) 0 90%/100% auto no-repeat;
}

您还可以使用CSS变量控制内部图片：

<div class="box">

</div>

.box {
 width:200px;
 height:210px;
 border-radius: 0 0 50% 50%/0 0 70% 70%;
 background:
  var(--image) center/cover, 
  url(https://i.stack.imgur.com/i7iHM.png) 0 180%/100% auto no-repeat;
 position:relative;
 display:inline-block;
}
.box:after {
  content:"";
  position:absolute;
  z-index:1;
  bottom:0;
  top:50%;
  left:0;
  right:0;
  background:url(https://i.stack.imgur.com/i7iHM.png) 0 90%/100% auto no-repeat;
}