使用画布或SVG在整个页面上放置蒙版

Question

我试图在整个页面上做一个蒙版。 我的解决方案是制作具有蒙版形状的透明png，并使边框真正变大。 之后，我将其放在整个文档中。

尽管我已经有了解决方案，但是它对我来说真的很脏，根本没有响应。

有没有更好的解决方案，例如使用canvas，javascript和SVG？

.masktest {
  position: fixed;
  z-index: 9999;
  width: 200px;
  height: 200px;
  border: 8000px solid #000;
  left: 50%;
  top: 50%;
  margin-top: -8100px;
  margin-left: -8100px;
  background-image: url('img/masktest.png');
}

这是小提琴

Answer 1

我会用:before或:after伪元素制作面具。

 body { margin: 0; } body:before { content: ""; position: fixed; background: rgba(0,0,0,.75) url("https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg") center / cover; width: 100%; height: 100%; } 

 Hello world.