CSS pour transformer les pages Web en noir et blanc

Il existe trois façons de changer globalement la couleur de l'ensemble de la page Web, à savoir : la définir directement avec CSS, ajouter un filtre SVG et changer la couleur en parcourant toutes les balises via js. .

1. Définissez directement le CSS

Modifiez directement le style, puis définissez la classe

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

là où il doit être appliqué (tutoriel vidéo : tutoriel vidéo CSS)

2. svg

Écrivez d'abord le fichier svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

appel css

filter: url(gray.svg#grayscale);

3. insérez le code directement La, il est impossible de l'écrire à la main (ps : rgba et !important ne peuvent pas être modifiés, d'autres n'ont pas été testés)

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

Le source js n'est pas très bon, ce qui provoquera le La page Web se charge trop lentement. Vous pouvez le télécharger manuellement en niveaux de gris locaux (après avoir cliqué sur F12, passez à l'onglet Réseau, actualisez la page Web et un fichier apparaîtra, cliquez avec le bouton droit sur Enregistrer sous)

Ensuite. utilisez js ou jq pour appeler

/*js调用*/
grayscale(document.getElementById("thisImage"));
/*jq调用*/
grayscale($("#thisImage"));

Tutoriel recommandé :

Démarrage rapide avec CSS

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!