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 richten Sie den PostgreSQL-Start unter Ubuntu 16.04 ein
Da PostgreSQL kompiliert und installiert ist, müs...
Ein Debugging-Prozessprotokoll für chinesische Zeichentrickfiguren in der Startkonsole des Tomcat-Quellcodes
Finden Sie das Problem Heute werde ich den Tomcat...
Anwendungshandbuch für chinesische WEB-Schriftarten
Die Verwendung von Schriftarten im Web ist sowohl ...
Detaillierte Erklärung zum Erstellen einer aktualisierbaren Ansicht in MySQL
Dieser Artikel beschreibt anhand eines Beispiels,...
7 Hauptelemente der Neugestaltung von Webseiten Teilen Sie die 7 Hauptelemente der Neugestaltung von Webseiten
Shopify Plus ist die Enterprise-Version der von u...
Eine kurze Diskussion über Yahoos 35 Regeln zur Front-End-Optimierung
Zusammenfassung: Ob bei der Arbeit oder im Vorste...
Ein kurzes Verständnis mehrerer Planungsalgorithmen für den siebenschichtigen Lastenausgleich von Nginx
In diesem Artikel werden hauptsächlich mehrere Pl...
So löschen Sie den Timer elegant in Vue
Inhaltsverzeichnis Vorwort Optimierung Ableitungs...
So aktivieren oder deaktivieren Sie Linux-Dienste mit den Befehlen chkconfig und systemctl
Dies ist ein wichtiges (und wunderbares) Thema fü...
Analyse und Erklärung der Unterschiede zwischen DIV-, Tabellen- und XHTML-Website-Erstellung
Vereinfacht ausgedrückt geht es beim Erstellen ein...
Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes
Drag & Drop ist eine gängige Funktion im Fron...
Nginx verwendet Lua+Redis, um IP dynamisch zu blockieren
1. Hintergrund Bei unserer täglichen Website-Wart...
Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse
Die übliche Methode zum Bereitstellen eines Sprin...
Mysql implementiert drei Funktionen zum Feldspleißen
Beim Exportieren von Daten in Operationen ist das...
Eine großartige Sammlung von Lernressourcen zu Webstandards
Diese Spezifikationen sollen die Veröffentlichung ...