CSS剪辑一个图像,然后将另一个图像作为边框 [英] CSS clip-circle an image and put another image as border
本文介绍了CSS剪辑一个图像,然后将另一个图像作为边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
可以在这里找到Similair问题:
Similair question can be found here:
However, I would like to have the red outline replaced by an image, e.g.:
我在psuedo标签中尝试了:before和:after,但是没有找到解决方案.我应该朝哪个方向实现这一目标?
I tried among others :before and :after psuedo tags but did not find the soluition. Which direction I should look to achieve this?
推荐答案
您可以使用多个背景,例如:
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>
您还可以使用CSS变量控制内部图片:
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>
这篇关于CSS剪辑一个图像,然后将另一个图像作为边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文