Html 背景上有透明边框的圆圈

我怎样才能在CSS中实现这一点

我已经尝试了很多方法，但黑暗的背景仍然存在，无法剪裁，因此它下面的背景图像是不可见的

.item{
位置：相对位置；
}
.项目：在{
内容：''；
规模(100%),；
排名：0；
左：0；
z指数：1；
背景：rgba（0,0,0,0.1）；
}

10 امتیاز

这可以通过使用径向渐变来实现（示例拆分为单独的行，以便于阅读）

其中，

圆心处的圆40px

定义了圆相对于父元素的位置（水平居中，从顶部向下40px），请记住这是圆心的位置，因此您需要考虑其半径

我们在渐变之间使用非常小的步长，使其看起来像一条实线，而不是一个模糊的渐变（我发现

1px

差异有助于防止线条上出现锯齿，并使一切看起来更平滑）

您可以通过更改渐变中的

30px

、

31px

、

34px

和

35px

值来调整圆的大小或线的厚度

工作示例：

.item{
位置：相对位置；
宽度：200px；
高度：200px；
背景：url(https://picsum.photos/seed/picsum/200/200);
}
.项目：在{
位置：绝对位置；
内容：''；
排名：0；
左：0；
底部：0；
右：0；
z指数：1；
/*这是环本身，您可以使用像素值调整它的大小，留下1px的差异通常为平滑边缘留下最佳结果*/
背景图像：径向梯度（中心圆圈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,0.4）35px，rgba（0,0,0,0.4）100%）；
}

---

您可以将几个div与

position:absolute一起使用：


正文{
保证金：0；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.bg{
高度：100vh；
宽度：100%；
背景图像：url（'https://i.ytimg.com/vi/fqumdSlyLxg/maxresdefault.jpg');
滤光片：亮度（0.4）；
}
.圆圈{
位置：绝对位置；
高度：150像素；
宽度：150px；
边界半径：50%；
背景滤光片：亮度（5）；
-webkit背景滤镜：亮度（5）；
z指数：0；
}
.内圈{
位置：绝对位置；
高度：142px；
宽度：142px；
边界半径：50%；
背景滤镜：亮度（0.2）；
-webkit背景滤镜：亮度（0.2）；
z指数：1；
}
.费率{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
对正内容：空间均匀；
位置：绝对位置；
高度：142px；
颜色：白色；
z指数：2；
}
.金额{
字体大小：30px；
边界半径：50%；
文本阴影：0px 0px 5px#fff；
}

10
امتیاز
作为替代方案，我制作了
.item
及其子元素Flexbox容器，以便于定位

圆只是一个带边框的圆形元素

你现在要做的就是摆弄尺寸、颜色和款式

为了好玩，我添加了一些
：hover
效果

带注释的片段


/*均为FBL容器，便于定位*/
.item，.item>*，.rate{
显示器：flex；
对齐内容：居中；对齐项目：居中；
}
.rate{flex direction:column}
/*项目内容*/
.项目{
位置：相对；/*将子元素定位到此父元素*/
宽度：400px；
高度：600px；
/*将图像设置为项目的背景*/
背景图像：url（“https://i.ytimg.com/vi/fqumdSlyLxg/maxresdefault.jpg");
背景重复：无重复；
背景尺寸：封面；/*过大/过小时剪裁/拉伸*/
背景色：rgba（0,0,0,0.3）；/*部分黑色*/
背景混合模式：叠加；/*将背景颜色与图像混合*/
/*赏心悦目*/
保证金：5rem自动；/*居中*/
字号：1.5em；
字体大小：粗体；
颜色：rgba（255255.6）；
边界半径：12px；
}
.项目>*{
位置：绝对；/*将子级放置在父级内部*/
宽度：100px；高度：100px；
不透明度：0.7；
}
.rate{text shadow:0px 0px 7px rgba（255255255，.8）}
.circle{
边框：5px实心rgba（255255.3）；
边界半径：50%；
滤镜：模糊（1px）；
}
/******************************/
/*悬停眼糖果，仅演示*/
/******************************/
.项目：悬停{
背景混合模式：正常；
颜色：rgba（255255,1）；
}
.项目：悬停>*{
不透明度：1；
}
.项目：悬停.圆圈{
边框颜色：rgba（255255.8）；
}
/*演示眼糖果*/
.项目{
/*GMC标高1dp*/
盒子阴影：0px 2px 1px-1px rgba（0,0,0,20），
0px 1px 1px 0px rgba（0,0,0,14），
0px 1px 3px 0px rgba（0,0,0,12）；
}
.项目：悬停{
变换：比例（1.01）；
/*GMC高程3dp*/
盒影：0px 3px 3px-2px rgba（0,0,0,20），
0px 3px 4px 0px rgba（0,0,0,14），
0px 1px 8px 0px rgba（0,0,0,12）；
}
/*.item:active:not（：focus）{transform:scale（1）}/*为某些动画启用*/

10
文本
无限
盒影
带
溢出：隐藏


.项目img{
最大宽度：100%；
垂直对齐：顶部；
}
.项目{
字体系列：“阿米里”，衬线；
宽度：300px；
保证金：20px自动；
溢出：隐藏；/*步骤1*/
位置：相对位置；
}
.费率{
位置：绝对位置；
宽度：100px；
高度：100px；
边界半径：100%；
背景：rgba（0,0,0,7）；
顶部：80px；
左：50%；
转化：translatex（-50%）；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
字体大小：22px；
颜色
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%
);