html - 在背景上带有透明边框的圆圈

Question

如何在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>  

我正在寻找一种使深色背景的一部分透明的方法，以便可以看到图像。

Answer 1

这可以通过使用径向渐变来实现(示例分成几行以使其更易于阅读)

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年以来发布了几乎所有浏览器)