Verschiedene Methoden zum Ändern des CSS-Stils, um graue Webseiten zu erhalten (keine Farbe, nur helles Schwarzweiß)
|
Normalerweise färben wir als Webmaster während des Qingming-Festes, des Nationalen Trauertags, des Tages eines schweren Erdbebens und des Todestages oder Todestags einiger einflussreicher Persönlichkeiten alle Seiten unserer Website grau (schwarz-weiß), um den Verstorbenen unser Beileid auszusprechen. Lassen Sie uns heute darüber sprechen, wie diese Funktion mit ein paar einfachen Codezeilen implementiert werden kann. Heute Morgen erwähnte ein Internetnutzer, dass er den Gesamtfarbton der Website in Grau und Schwarz ändern möchte. Ich erinnere mich, dass dies in der Vergangenheit verwendet wurde, um an bestimmte Daten zu erinnern, und es wurde auch auf der Website 123WORDPRESS.COM verwendet. Ich erinnere mich, dass dies damals direkt durch Ändern von CSS erreicht werden konnte. Da es Benutzer gibt, die dies benötigen, werde ich mir etwas Zeit nehmen, um es zu klären und zu prüfen, ob es andere, bessere Methoden gibt. Wir können den geeigneten CSS-Codestil entsprechend den tatsächlichen Anforderungen auswählen und ihn dem Code unserer eigenen Webseitenvorlage hinzufügen, um Grau-, Schwarz- und Weißstile der Webseite zu erzielen. Erstens, Webseite schwarz und weiß Code Stil A: Ändern Sie die CSS-Datei Wir können den folgenden CSS-Code zur CSS-Datei der Webseite hinzufügen, um die Webseite schwarzweiß zu machen, d. h. die Website grau CSS Code Webseite schwarz-weiß Code Stil A
html {
Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
-Webkit-Filter: Graustufen (100 %);
}Diese Code-Webseite im Schwarzweiß-Codestil B wird ebenfalls empfohlen
<Stil>
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;
}
</Stil>Hier können wir den Code zur HEAD-Vorlage hinzufügen, um die gesamte Site zu erreichen. Zweite Methode: Fügen Sie den folgenden Code zum <head>-Tag der Webseite hinzu Wenn Sie die CSS-Datei nicht ändern möchten, können Sie die Seiten der Website ausgrauen, indem Sie Inline-CSS-Code innerhalb des <head>-Tags in der Kopfzeile der Webseite hinzufügen. Code
<style type="text/css">
html {
Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
-webkit-filter: Graustufen (100 %);}
</Stil>Die dritte Methode: Ändern Sie das <html>-Tag, um Inline-Stile hinzuzufügen Wenn Ihnen die beiden oben genannten Methoden nicht gefallen, können Sie das <html>-Tag ändern, um Inline-Stile hinzuzufügen und so den Effekt einer Ausgrauung der Webseite zu erzielen. Code
Viertens: Vom Autor selbst verwendeter CSS-Code Code:
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- */
}
Hier können wir den Code nach tatsächlichem Bedarf ergänzen. PS: Die oben genannten Methoden steuern alle die Anzeige der Seite über CSS-Filter. Der einzige Unterschied besteht in der Art und Weise, wie der CSS-Code aufgerufen wird. Leute, gräbt aus, was euch gefällt! |
<<: Vue implementiert horizontales Scrollen von Text im Laufschriftstil
>>: MariaDB-Serverinstallation der MySQL-Reihe
Artikel empfehlen
So prüfen Sie, ob Daten vorhanden sind, bevor Sie sie in MySQL einfügen
Geschäftsszenario: Der Besuchsstatus des Besucher...
Detaillierte Schritte zum Erstellen eines Vue-Scaffolding-Projekts
Vue-Gerüst -> vue.cli Erstellen Sie schnell ei...
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...
Der Unterschied zwischen div und span in HTML (Gemeinsamkeiten und Unterschiede)
Gemeinsamkeiten: Das DIV-Tag und das SPAN-Tag beh...
Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung
Vorwort Bei der Linux-Kernel-Programmierung werde...
Detaillierte Erklärung des HTML-Bereichs-Tags
Der <area>-Tag definiert einen Bereich in e...
Analyse der Implementierungsmethode der Koexistenz von Nginx und Apache unter Linux-Servern
Dieser Artikel beschreibt, wie die Koexistenz von...
Über die Rolle von Metadaten in HTML (aus dem Internet gesammelt und sortiert)
W3Cschool erklärt es so Das <meta>-Element l...
Detaillierte Erklärung der Mencached-Cache-Konfiguration basierend auf Nginx
Einführung Memcached ist ein verteiltes Caching-S...
Gründe und Lösungen für das Nicht-Wirksamwerden der MySQL-SQL-Modus-Änderung
Inhaltsverzeichnis Vorwort Szenariosimulation Zus...
IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern
<br />Verwandte Artikel: Web-Kenntnisse: Lös...
Lösung für die Willkommensmeldung im Notfallmodus beim Booten von CentOS7.4
Heute habe ich eine virtuelle Maschine für ein Ex...
Analysieren Sie den Unterschied zwischen den Methoden querySelector und getElementById in JavaScript
Inhaltsverzeichnis 1. Übersicht 1.1 Verwendung vo...
MySQL 8.0.12 Installations- und Nutzungs-Tutorial
Das Installations- und Verwendungstutorial für My...
So verwenden Sie Echarts zum Visualisieren von Komponenten in Vue
Offizielle Website-Adresse der Echarts-Komponente...