Die Website ist ausgegraut. Kompatibler Code einschließlich Bilder unterstützt alle Browser

An nationalen Trauertagen, Tagen mit schweren Erdbeben und dem Qingming-Fest färben wir unsere gesamte Website grundsätzlich grau, um den Verstorbenen unser Beileid auszusprechen. Hier sind ein paar Methoden

1. Fügen Sie einfach den Code zum Text hinzu

Es ist sehr einfach, diesen Effekt zu erzielen. Sie benötigen nur einen CSS-Code: Filter: Graustufen (100 %) und fügen ihn im Stil des Body-Elements ein. Die Effekte, die wir selbst erzielt haben:

2. Direkt in der aufgerufenen CSS-Styledatei, so dass keine Änderung des HTML-Codes nötig ist.

Direkt zum Code:

/*Website wird grau*/
html {-webkit-filter: Graustufen (100 %);-moz-filter: Graustufen (100 %);-ms-filter: Graustufen (100 %);-o-filter: Graustufen (100 %);filter:progid:DXImageTransform.Microsoft.BasicImage (Graustufen = 1);_filter: keine;}

Oder laden Sie den Code herunter. Der obige Code wird empfohlen.

Code kopieren

Der Code lautet wie folgt:

html{
-Webkit-Filter: Graustufen (100 %);
-moz-filter: Graustufen (100 %);
-ms-filter: Graustufen (100 %);
-o-Filter: Graustufen (100 %);
Filter: Graustufen (100 %);
Filter: URL ("data:image/svg+xml;utf8, <svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'Graustufen\'><fecolormatrix Typ=\'Matrix\' Werte=\'0,3333 0,3333 0,3333 0 0 0,3333 0,3333 0,3333 0 0 0,3333 0,3333 0 0 0 0 0 1 0\'></fecolormatrix></filter></svg>#Graustufen");
Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
}

3. Tencents Ansatz:

<Stil>
Körper *{
-webkit-filter: Graustufen (100 %); /* webkit */
-moz-filter: Graustufen (100 %); /*Firefox*/
-ms-filter: Graustufen (100 %); /*ie9*/
-o-filter: Graustufen (100 %); /*Opera*/
Filter: Graustufen (100 %);
Filter:progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1); 
Filter: grau; /*ie9- */
}
</Stil>

Einige andere Methoden:

1. Externer Stil des Schwarzweiß-Codes der Webseite (bitte verwenden Sie zum Schreiben eine *.css-Datei)

html {
Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
-Webkit-Filter: Graustufen (100 %);
}

2. Interner Stil des Schwarz-Weiß-Codes der Webseite (geschrieben im Head-Tag)

<style type="text/css">
<!--
html {
Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
-webkit-filter: Graustufen (100 %);}
-->
</Stil>

3. Inline-Schwarzweißcode der Webseite (HTML-Tag schreiben, HTML suchen)

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(graustufen=1);
-webkit-filter: Graustufen (100%);">

Es ist nur ein Code, der vom Herausgeber von 123WORDPRESS.COM zusammengestellt wurde. Er ist einfach und praktisch, ich hoffe, er kann jedem helfen.

<<: Tipps zum Deaktivieren des Kompatibilitätsansichtsmodus von IE8 und IE9 mithilfe von HTML

>>: Vues einfacher Implementierungsprozess zur Nachahmung der NetEase Cloud Music Player-Schnittstelle

Grundkenntnisse zum Lastenausgleich und ein einfaches Beispiel zum Lastenausgleich mit nginx

Die Website ist ausgegraut. Kompatibler Code einschließlich Bilder unterstützt alle Browser

Grundkenntnisse zum Lastenausgleich und ein einfaches Beispiel zum Lastenausgleich mit nginx

Thumbnail-Hover-Effekt mit CSS3 implementiert

Nginx-Proxy-Axios-Anforderung und Vorsichtsmaßnahmen

Benutzerdefiniertes Auswahlfeld für die Webseite Auswählen

Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung

Beispielanalyse des Prinzips und der Lösung des MySQL-Gleitreihenfolgeproblems

Wie wählt man das perfekte Aloe Vera Gel aus? Perfektes Aloe Vera Gel – So erkennen Sie Echtheit und Fälschung

Detaillierte Erklärung der HTML-Formularelemente (Teil 1)

Begrenzung der Anzahl kurzfristiger Zugriffe auf eine bestimmte IP basierend auf Nginx

Tutorial zur Konfiguration von SSH und Xshell für die Verbindung zum Server unter Linux (mit Bildern)

Artikel empfehlen

Detaillierte Erklärung zur Verwendung der Clip-Path-Eigenschaft in CSS

18 allgemeine Befehle in der MySQL-Befehlszeile

Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.18.zip (Windows 64 Bit)

Das Prinzip und die Implementierung des JS-Drag-Effekts

Vue+Router+Element zur Implementierung einer einfachen Navigationsleiste

Detailliertes grafisches Tutorial zur Installation des Ubuntu 20.04-Dualsystems unter Windows 10

So verwenden Sie Docker zum Erstellen eines Redis-Master-Slaves

Detaillierte Erklärung der dynamischen Linkbibliothek, die die C/C++-Methode in Python in Ubuntu aufruft

Detaillierte Schritte zum Herunterladen und Installieren von Tomcat unter Linux

Detaillierte Erklärung des Inline-Formats von HTML-Tabellen

CSS-Vererbungsmethode

So lassen Sie eine https-Website den https-Referrer senden und den http-Referrer springen

Eine sehr detaillierte Erklärung des Linux DHCP-Dienstes

Basierend auf den Sonderzeichen in der URL-Escape-Kodierung

Installieren Sie MySQL 5.7.17 im Win10-System