如何使用 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

.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>

Answer 3

点这里！

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

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

JSFiddle

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

How can I achieve this transparency effect using css?

html

css

psd