Setzen Sie eine Maske über eine ganze Seite mit Leinwand oder SVG

Question

Ich versuche, eine Maske über eine ganze Seite zu machen. Meine Lösung besteht darin, einen transparenten Png mit der Form der Maske zu machen und die Ränder wirklich groß zu machen. Danach lege ich das über das ganze Dokument.

Obwohl ich schon die Lösung habe, aber es sieht wirklich dreckig für mich aus und reagiert überhaupt nicht.

Gibt es eine bessere Lösung, um dies mit Canvas, Javascript und SVG zu tun?

.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

Ich würde den Maske mit einem Pseudo-Elemente macht entweder :before oder :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.