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

Question

I am trying to make a mask over a whole page. My solution is to make a transparent png with the shape of the mask and making the borders really big. After that I am putting this over the whole document.

Although I already got the solution, but it looks really dirty to me and is not responsive at all.

Is there a better solution to do this like with canvas, javascript and 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');
}

Here is the fiddle

Answer 1

I would make the mask with a pseudo element either :before or :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.