如何在CSS中实现这样的目标?
我已经尝试了很多方法,但是深色背景仍然存在,并且不能被裁剪,因此其下的背景图像是不可见的...
.item {
position: relative;
}
.item:before {
content: '';
size(100%);
top: 0;
left: 0;
z-index: 1;
background: rgba(0, 0, 0,0 0.1);
}
<div class="item">
<img>
<span class="rate">
<span class="amount">10</span> امتیاز
</span>
</div>
我正在寻找一种使深色背景的一部分透明的方法,以便可以看到图像。
最佳答案
这可以通过使用径向渐变来实现(示例分成几行以使其更易于阅读)
background-image: radial-gradient(
/* Position the circle at the center, 40px from the top */
circle at center 40px,
/* The center of the radius should be dark */
rgba(0,0,0,0.4) 0%,
/* This is the inner edge of the circle, we transition from dark-transparent between pixels 30 and 31 */
rgba(0,0,0,0.4) 30px, rgba(0,0,0,0) 31px,
/* This is the outer edge of the circle, we transition back from transprent-dark between pixels 34 and 35*/
rgba(0,0,0,0) 34px, rgba(0,0,0,0.4) 35px,
/* Everything outside of the circle should be dark */
rgba(0,0,0,0.4) 100%
);
无需记住circle at center 40px
定义圆相对于父元素的位置(水平居中,从顶部向下40像素),这是圆的中心位置,因此您需要考虑其半径。而且我们在渐变之间使用了非常小的步长,使其看起来像实线而不是模糊的渐变(我发现
1px
的不同有助于防止线上出现混叠,并使所有内容看起来更加平滑)您可以通过更改渐变中的
30px
,31px
,34px
和35px
值来调整圆的大小或线的粗细。工作示例:
.item {
position: relative;
width: 200px;
height: 200px;
background: url(https://picsum.photos/seed/picsum/200/200);
}
.item:before {
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
/* This is the ring itself, you can adjust it's size using the pixel values, leaving 1px differnce usually leaves the best result for smooth edges */
background-image: radial-gradient(circle at center 40px, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 30px, rgba(0, 0, 0, 0) 31px, rgba(0, 0, 0, 0) 34px, rgba(0, 0, 0, 0.4) 35px, rgba(0, 0, 0, 0.4) 100%);
}
<div class="item"></div>
(此方法是浏览器compatible,自2010年以来发布了几乎所有浏览器)
关于html - 在背景上带有透明边框的圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63035636/