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');
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.