Zusammenfassung eines CSS-Codes, der die gesamte Site grau macht
|
Um den Märtyrern und Opfern des Kampfes gegen die COVID-19-Epidemie die tiefe Anteilnahme der Menschen aller ethnischen Gruppen im ganzen Land auszudrücken, hat der Staatsrat heute eine Erklärung herausgegeben, in der er beschlossen hat, am 4. April 2020 (morgen) eine nationale Trauerveranstaltung abzuhalten. Während dieser Zeit wehten im ganzen Land und vor den Botschaften im Ausland die Flaggen auf Halbmast, öffentliche Unterhaltungsveranstaltungen wurden landesweit ausgesetzt und ab 10:00 Uhr des 4. April hielten die Menschen des Landes eine dreiminütige Schweigeminute ab, Autos, Züge und Schiffe hupten und die Flugabwehr ertönte Alarm. Als ich daran dachte, dass die gesamte Website komplett grau wurde, als ich sie am Tag der Stille besuchte, dachte ich, dass es viel Zeit und Energie kosten würde, wenn ich sofort mit der Entwicklung und Designänderung beginnen würde. Gäbe es CSS, das alle Elemente direkt verarbeiten und grau machen könnte? Dann dachte ich an den CSS3-Filter und er bestätigte auch die Machbarkeit dieser Idee. Filter: Graustufen können den Graustufenwert eines Elements anpassen
.Graufilter {
Filter: Graustufen (100 %);
-Webkit-Filter: Graustufen (100 %);
-moz-filter: Graustufen (100 %);
-ms-filter: Graustufen (100 %);
-o-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\'/></filter></svg>#Graustufen");
Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
-webkit-filter: Graustufen(1);
}
Tatsächlicher Kampf Nehmen wir Station B als Beispiel: Normalerweise wird die Navigationsleiste von Station B nach dem Heruntergleiten oben auf der Seite fixiert.
Wenn Sie jedoch dieses CSS zum Textkörper hinzufügen, geschieht Folgendes:
Sie können feststellen, dass es nicht mehr am oberen Rand der Seite fixiert ist, sondern aus dem Bildschirm herausragt. Der kleine Fernsehmann in der unteren linken Ecke des Bildschirms ist ebenfalls in die obere Hälfte der Seite gewandert. Warum passiert das? Ich habe bei Google nach relevanten Informationen gesucht und Folgendes gefunden: Wenn ein Filterstil angegeben ist und sein Wert ungleich „none“ ist, wird für die untergeordneten Elemente des Elements, auf das der Stil angewendet wird, ein neuer Container erstellt, sodass der Positionierungsmaßstab dieser absolut oder fest positionierten Elemente relativ zum neu erstellten Container ist. Wir können daraus schließen, dass „fixed“ relativ zum Stammcontainer von HTML positioniert ist. Wenn ein Filter auf den Textkörper gesetzt wird, wird eine neue Positionierungsreferenz erstellt. Wenn die Seite gescrollt wird, wird der Textkörper aus dem Bildschirm gescrollt, und die Fixierung aller untergeordneten Elemente im Textkörper führt zu unerwarteten Effekten. Wie kann man das Problem lösen? Lösung 1 Eine Methode, die sich auf die gesamte Site auswirkt: Wir können diesen Stil auf das HTML-Stammelement anwenden. Selbst wenn ein neues Positionierungsreferenzelement erstellt wird, hat dies keine unerwarteten Auswirkungen auf die untergeordneten Elemente.
html {
Filter: Graustufen (100 %);
-Webkit-Filter: Graustufen (100 %);
-moz-filter: Graustufen (100 %);
-ms-filter: Graustufen (100 %);
-o-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\'/></filter></svg>#Graustufen");
Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
-webkit-filter: Graustufen(1);
}Wirkung:
Lösung 2 Wenn die gesamte Site nicht ausgegraut ist, können wir die Elemente, die den Filter verwenden müssen, separat hinzufügen
<html>
<Text>
<div Klasse="Graufilter"></div>
</body>
</html>
<Stil>
.behoben {
Position: fest;
oben: 100px;
links: 100px;
Höhe: 100px;
Breite: 100px;
Hintergrundfarbe: #f00;
}
.Graufilter {
Filter: Graustufen (100 %);
-Webkit-Filter: Graustufen (100 %);
-moz-filter: Graustufen (100 %);
-ms-filter: Graustufen (100 %);
-o-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\'/></filter></svg>#Graustufen");
Filter: Progid:DXImageTransform.Microsoft.BasicImage(Graustufen=1);
-webkit-filter: Graustufen(1);
}
</Stil>
Dies ist das Ende dieses Artikels über eine CSS-Codezusammenfassung, die die gesamte Site ausgegraut macht. Weitere relevante CSS-Site-Ausgrauungsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Verwenden von js zum Implementieren eines einfachen Lichtschaltercodes
Artikel empfehlen
WHMCS V7.4.2 Grafisches Installationstutorial
1. Einleitung WHMCS bietet eine Komplettlösung fü...
Detaillierte Erläuterung der Installation von Anwendungen in Linux Centos7 ohne Internetverbindung
1. Im vorherigen Kapitel haben wir gelernt, dass ...
Detaillierte Schritte für deepin20 zur Installation von NVIDIA Closed-Source-Treibern
Schritt 1: Installieren Sie den tiefen "Graf...
MySQL versteht kurz, wie "order by" funktioniert
Zum Sortieren ist „order by“ ein Schlüsselwort, d...
Native Js-Implementierung des Kalender-Widgets
In diesem Artikelbeispiel wird der spezifische JS...
CSS-Position feste linke und rechte Doppelpositionierungs-Implementierungscode
CSS-Position Das Positionsattribut gibt den Posit...
So verwenden Sie Lazy Loading in React, um die Ladezeit des ersten Bildschirms zu verkürzen
Inhaltsverzeichnis verwenden Installieren Wie wir...
Eine Codezeile zeigt Ihnen, wie Sie Linux-Prozesse verbergen
Freunde fragen mich immer, wie man Linux-Prozesse...
Verwenden Sie eine DIV-Maske, um das Problem zu lösen, dass das direkte Aktivieren des Kontrollkästchens mit der Maus ungültig ist
Während des Front-End-Entwicklungsprozesses trat e...
Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen
Offizielle Website: http://code.google.com/p/zen-c...
Ist das Tag „li“ ein Blockelement?
Warum kann es die Höhe festlegen, aber im Gegensat...
JavaScript implementiert einfache Rechnerfunktion
In diesem Artikel wird der spezifische JavaScript...
Ein gründliches Verständnis des JS-nativen Syntaxprototyps, des __proto__ und des Konstruktors
Inhaltsverzeichnis 1 Einleitung 2 Voraussetzungen...
Implementierungsschritte für die Docker-Bereitstellung von SpringBoot-Anwendungen
Inhaltsverzeichnis Vorwort Docker-Datei Was ist e...
Verwendung des MySQL-Stresstesttools Mysqlslap
1. MySQLs eigenes Stresstest-Tool Mysqlslap mysql...