如何使用css实现这种透明效果？

Question

这个设计是在photoshop中创建的，我试图转换为html和css。 我有一个背景图像（与绿灯），减少不透明覆盖和一些文字的图标位于中心。我如何在html和css中获得如下所示的效果？

Answer 1

点击这里！

基本上，你可以创建一个透明的圆形，带有白色（或黑色）边框！

background: transparent; 
border-radius: 50%; 
border: 1000px solid rgba(0, 0, 0, 0.5); 

JSFiddle

Answer 2

你可以申请一个border-radius到内部元件和box-shadow像这样：

Codepen Demo

div { 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: url(...) no-repeat; 
    background-size: cover; 
} 

p { 
    border-radius: 50%; 

    /* add responsive behaviour */ 
    height : 60vw; 
    width : 60vw; 

    /* but limit its max-height/width */ 
    max-height : 400px; 
    max-width : 400px; 

    /* apply a gray shadow outside */ 
    box-shadow : 0 0 0 50vmax rgba(255,255,255, .4); 
} 

50vmax是一个阴影蔓延足够宽和中间对齐例如可实现通过flexbox定位。只要你喜欢调整阴影（或颜色）的alpha值。

---

最终结果

Answer 3

.container { 
 
    height:400px; 
 
    width:400px; 
 
    position:relative; 
 
overflow:hidden; 
 
    } 
 

 
.overlay { 
 
     top:50%; 
 
    left:50%; 
 
    margin-top:-500px; 
 
    margin-left:-500px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    background-color: transparent; 
 
    border-style: solid; 
 
    box-sizing: content-box; 
 
    z-index:999; 
 
    pointer-events:none; 
 
    border: 400px solid rgba(0,0,0,.9); 
 
    }

<div class="container"> 
 
    <div class="overlay"></div> 
 
</div>