CSS clip-circle an image and put another image as border

问题

Similair question can be found here:

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

However, I would like to have the red outline replaced by an image, e.g.:

I tried among others :before and :after psuedo tags but did not find the soluition. Which direction I should look to achieve this?

回答1:

You can use multiple background like this:

.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;
}

<div class="box">

</div>

You can also control the image inside using CSS variable:

.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;
}

<div class="box" style="--image:url(https://i.stack.imgur.com/bdZeE.png)">
</div>
<div class="box" style="--image:url(https://i.stack.imgur.com/7A8fP.png)">
</div>

来源：https://stackoverflow.com/questions/52906946/css-clip-circle-an-image-and-put-another-image-as-border

标签

html

css

background-image

clip