css 3和html 5创建掩码 [英] css 3 and html 5 creating masks

问题描述

是否可以使用css 3创建？

Is it possible to create this using css 3?

正如你所看到的，有一个透明的圆圈，但容器有黑色的背景，有50％的不透明度。

As you can see, there is a transparent circle but the container has a black background with 50% opacity.

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

I thought it might be doable using svg but it doesn't look possible.

推荐答案

你可以使用 box-shadow 设置第四个参数作为阴影扩散距离，只需将它设置为一个较大的数字，这样你就可以确定你覆盖整个屏幕区域。

You can simply use box-shadow by setting the fourth argument as the shadow spread distance, just set it at an high number so you are certain you're covering the whole screen area.

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

这将生成一个直径为200px的圆形蒙版，

This will generate a circle mask with 200px diameter, then you can position it on the screen using top/left wherever you like.

这里是一个代码，如果你想看到它在行动 http://codepen.io/luigimannoni/pen/cbpwL

Here's a codepen if you want to see it in action http://codepen.io/luigimannoni/pen/cbpwL

干杯

这篇关于css 3和html 5创建掩码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！