css 3和html 5创建掩码

Question

是否可以使用css 3创建它？

如您所见，有一个透明圆圈，但容器有黑色背景，不透明度为50％。

我认为使用svg可能是可行的，但看起来不太可能。

Answer 1

您可以通过将第四个参数设置为阴影展开距离来简单地使用box-shadow，只需将其设置为较大的数字即可确保您覆盖整个屏幕区域。

.mask {
  position: fixed;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 99999px rgba(50, 50, 50, 0.8);
}

这将生成一个直径为200px的圆形遮罩，然后您可以使用顶部/左侧将其放置在屏幕上。

如果你想在行动http://codepen.io/luigimannoni/pen/cbpwL

中看到它，那么这就是一个代码

干杯

Answer 2

您可以使用覆盖整个内容的遮罩，并使用比圆形元素的遮罩更高的z-index值。