CSS 剪辑一个图像并将另一个图像作为边框
CSS clip-circle an image and put another image as border
可以在这里找到类似的问题:
但是,我想用图像替换红色轮廓,例如:
我尝试了 :before 和 :after 伪标签,但没有找到解决方案。我应该朝哪个方向看才能实现这一目标?
您可以像这样使用多个背景:
.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变量控制里面的图像:
.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>
可以在这里找到类似的问题:
但是,我想用图像替换红色轮廓,例如:
我尝试了 :before 和 :after 伪标签,但没有找到解决方案。我应该朝哪个方向看才能实现这一目标?
您可以像这样使用多个背景:
.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变量控制里面的图像:
.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>