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

Question

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

Answer 1

你可以将a border-radius应用于内部元素box-shadow等等:

Codepen演示

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

最后结果