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
Kopieren von Node.js-Dateien, Erstellen von Ordnern und andere damit verbundene Vorgänge
NodeJS kopiert die Dateien: Für den Kopiervorgang...
Eine kurze Analyse des MySQL-Index
Ein Datenbankindex ist eine Datenstruktur, deren ...
So bedienen Sie Docker und Images
Spiegel finden Wir können auf der Docker Hub-Webs...
Zusammenfassung zweier Methoden zum Implementieren der Vue-Druckfunktion
Methode 1: Installieren Sie das Plugin über npm 1...
Das WeChat-Applet implementiert den Serveraufbau des Benutzeranmeldemoduls
Ich habe node.js zum Erstellen des Servers gewähl...
WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet
Hallo zusammen, heute werde ich mit Ihnen die WeP...
Detailliertes Installations- und Konfigurationstutorial für mysql5.7 unter CentOS
Installieren Stellen Sie sicher, dass Ihr Benutze...
MySQL Master-Slave-Synchronisationsmechanismus und Tracking-Prozess für Synchronisationsverzögerungsprobleme
Vorwort Als DBA werden Sie bei Ihrer Arbeit häufi...
Detaillierte Erläuterung zur Verwendung von JS, um den Effekt einer PS-Radiergummi-Rubbelkarte auf der Leinwand zu erzielen
Inhaltsverzeichnis Wirkungsdemonstration:Hauptimp...
Detaillierte Erklärung zur Verwendung des scp-Befehls zum Remote-Kopieren von Dateien unter Linux
Vorwort scp ist die Abkürzung für „Secure Copy“. ...
Detaillierte Analyse des Tomcat-Servers des Centos 7-Systems
Inhaltsverzeichnis 1. Der Ursprung von Tomcat 1. ...
Zusammenfassung zur Verwendung der Reduce()-Methode in JS
Inhaltsverzeichnis 1. Grammatik 2. Beispiele 3. A...
Nginx verbietet den direkten Zugriff über IP und leitet auf eine benutzerdefinierte 500-Seite weiter
Direkt zur Konfigurationsdatei Server { listen 80...
Detaillierte Erläuterung der Anwendung von Docker Swarm im kontinuierlichen Integrationstest
Hintergrund Das Agile-Modell wird häufig verwende...
Hinweise zum Upgrade auf mysql-connector-java8.0.27
Kürzlich wurde bei einem Online-Sicherheitsscan e...