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

Question

这个设计是在photoshop中创建的，我正在尝试转换为html和css。 我有一个背景图像（带有绿灯），一个不透明度降低的叠加层和一些带有图标的文字位于中心。如何在html和css中获得如下所示的效果？

Answer 1

您可以将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 2

点击这里！

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

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

JSFiddle

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>