code svg pour implémenter le flou gaussien de la page

Le contenu partagé avec vous dans cet article concerne l'utilisation de svg pour obtenir un flou gaussien de page. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Mettez d'abord ce code dans n'importe quelle zone de la page
stdDeviation définit la quantité de flou, le minimum est 0

<svg style="display:none">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="1"/>
    </filter>
    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="2"/>
    </filter>
</svg>

---

Appelez l'effet de flou sur le dom

document.body.style.filter='url(#blur-effect-2)' //调用2级模糊量

document.body.removeAttribute("style");//关闭模糊效果

Recommandations associées :

Comment utiliser SVG pour dessiner des images avec JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!