CSS obtient un effet de niveaux de gris d'image et est compatible avec divers navigateurs

Ce chapitre vous présente la méthode d'utilisation de CSS pour obtenir l'effet de niveaux de gris des images. Il est compatible avec divers navigateurs tels que 360 ​​Browser. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

CSS obtient l'effet de niveaux de gris des images en faisant apparaître les images couleur en gris via les styles CSS, ce qui équivaut à ajuster le mode de couleur d'une image en niveaux de gris. CSS peut obtenir des effets de niveaux de gris grâce aux méthodes suivantes.

Méthode 1. Filtre IE

img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法
img { filter:Gray; } //简写

Les navigateurs de la série IE prennent tous en charge cet attribut du filtre IE, les navigateurs non-IE Le serveur le fait ne le supporte pas.

Méthode 2. Filtre CSS3

img { -webkit-filter: grayscale(100%); }

Le filtre CSS3 n'est pas encore un attribut standard, et il s'agit actuellement uniquement de Google Pris en charge par le navigateur Chrome, mais non pris en charge par d'autres navigateurs

L'effet CSS en niveaux de gris peut faciliter la mise en œuvre de certains effets spéciaux sur les pages Web. Vous souvenez-vous encore que de nombreuses pages Web nationales sont devenues grises du jour au lendemain en commémoration du 5.12. tremblement de terre? Cela peut être facilement réalisé en ajoutant les styles suivants au site Web :

html { filter:Gray; -webkit-filter: grayscale(100%); }

Quelqu'un a dû dire que même si l'effet de niveaux de gris du CSS est bon, il ne peut pas être compatible avec tous les navigateurs. Je fais? ? Si vous ne pouvez rien faire avec CSS, vous penserez certainement à utiliser JS pour y parvenir. Ici, je vous recommande un plug-in d'effet en niveaux de gris JS :

grayscale.js.

Utilisation :

//引入插件
<script type="text/javascript" src="grayscale.js"></script>

//调用插件
<script type="text/javascript">
    window.onload = function(){
        var el = document.getElementById( &#39;body&#39; );
        grayscale( el );
    };
</script>

Compatible avec tous les navigateurs, de nombreux styles en ligne seront ajoutés aux éléments après l'exécution. Si vous n'avez pas d'exigences élevées en matière de compatibilité, il est recommandé d'utiliser CSS pour obtenir un effet de degré de gris.