CSS, um Webseiten in Schwarzweiß umzuwandeln

Es gibt drei Möglichkeiten, die Farbe der gesamten Webseite global zu ändern, nämlich: direktes Festlegen mit CSS, Hinzufügen eines SVG-Filters und Ändern der Farbe durch Durchlaufen aller Tags über js .

1. CSS direkt festlegen

Bearbeiten Sie den Stil direkt und legen Sie dann die Klasse fest

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

wo es angewendet werden muss (Video-Tutorial: CSS-Video-Tutorial)

2. SVG

Schreiben Sie zuerst die SVG-Datei

<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>

CSS-Aufruf

filter: url(gray.svg#grayscale);

3. js Traversal

Nur Fügen Sie den Code direkt ein La, es ist unmöglich, ihn von Hand zu schreiben (ps: rgba und !important können nicht geändert werden, andere wurden nicht getestet)

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

Die js-Quelle ist nicht sehr gut, was dazu führen wird Die Webseite wird zu langsam geladen. Sie können die Datei „Local greyscale.js“ manuell herunterladen (nachdem Sie auf die Registerkarte „Netzwerk“ geklickt haben, wird die Webseite aktualisiert und eine Datei wird angezeigt. Klicken Sie dann mit der rechten Maustaste auf „Speichern unter“) js oder jq zum Aufrufen von

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

Empfohlenes Tutorial:

Schnellstart mit CSS

Das obige ist der detaillierte Inhalt vonCSS, um Webseiten in Schwarzweiß umzuwandeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!