使用画布或SVG在整个页面上设置遮罩

Put a mask over a whole page with canvas or SVG

本文关键字：设置 SVG      更新时间：2024-02-01

我正试图在整个页面上制作一个掩码。我的解决方案是用面具的形状制作一个透明的png，并使边界变得非常大。之后，我将把这个放在整个文件上。

虽然我已经得到了解决方案，但它在我看来真的很脏，而且根本没有响应。

有没有更好的解决方案可以像使用画布、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');
}

这是小提琴

我会用一个伪元素: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.

相关文章：