如何添加透明边框? [英] How to add a transparent border?
本文介绍了如何添加透明边框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的用户个人资料图片和一个绿色状态指示器.
I have a simple user profile image, and a green state indicator.
我想为指示器添加一个透明边框，该边框要超过背景图像，如下面的图像.
I want to add a transparent border to the indicator, which surpasses the image in the background, like the image below.
当背景是单色时很容易，我只需要添加相同颜色的边框，但是例如当背景是渐变色或图像时该怎么办?如果我添加白色边框，则它看起来像中间的图像，并且我想要一个像正确的图像那样的渲染器.
It's easy when the background is a single color, I just have to add a border with the same color, but what to do when the background is a gradient or an image for example? If I add a white border, it looks like the image in the middle, and I would like to have a render like the right image.
如何实现?
.user {
display: inline-block;
position: relative;
}
img {
width: 75px;
height: 75px;
border-radius: 75px;
}
.user-state {
position: absolute;
top: 4px;
right: 4px;
width: 15px;
height: 15px;
border-radius: 10px;
background: #57d642;
}
<body>
<div class="user">
<img src="http://lorempicsum.com/up/255/200/5" alt="">
<div class="user-state"></div>
</div>
</body>
推荐答案
I would consider SVG and mask like below:
.user {
display: inline-block;
position: relative;
}
svg {
width: 200px;
height: 200px;
}
.user:after {
content: "";
position: absolute;
top: 18px;
right: 18px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #57d642;
}
body {
background: linear-gradient(to right, pink, purple);
}
<div class="user">
<svg viewbox="0 0 200 200">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- This circle is your hole on the top -->
<circle r="28" cx="162" cy="38" fill="black"/>
</mask>
<!-- the clipath will replace border-radius -->
<clipPath id="circle">
<circle cx="100" cy="100" r="100" fill="white" />
</clipPath>
</defs>
<image width="200" height="200" xlink:href="https://i.picsum.photos/id/1003/200/200.jpg" mask="url(#hole)" clip-path="url(#circle)"/>
</svg>
</div>
这篇关于如何添加透明边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
