キャンバスや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'); 
} 

Here is the fiddle

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.