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
Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten
Das img-Tag in XHTML sollte wie folgt geschrieben...
Was ist JavaScript Anti-Shake und Throttling
Inhaltsverzeichnis 1. Funktion Entprellung 1. Was...
Lösung für Nginx-Installationsfehler
1. Entpacken Sie nginx-1.8.1.tar.gz 2. Entpacken ...
Detaillierte Erklärung gängiger Befehle in MySQL 8.0+
Aktivieren Sie den Fernzugriff Aktivieren Sie die...
MySQL-Beispiel für die Konvertierung von Spalten in Zeilen und die Gruppierung nach Jahr und Monat
Wie unten dargestellt: SELECT Anzahl(DISTINCT(a.r...
Methode zur Realisierung der Internetverbindung durch VMware Virtual Machine Bridging
Nachdem Sie VMware installiert und eine neue virt...
MySQL 8.0.18 Hash Join unterstützt keine Links-/Rechts-Joins. Probleme mit Links- und Rechts-Joins
In MySQL 8.0.18 wurde eine neue Hash-Join-Funktio...
Mini-Programm implementiert benutzerdefinierte mehrstufige Einzelauswahl und Mehrfachauswahl
In diesem Artikel wird der spezifische Code zur I...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20 unter Windows 10
Auf dem Win10-System ist MySQL8.0.20 lokal instal...
Windows 10 1903 Fehler 0xc0000135 Lösung [empfohlen]
Windows 10 1903 ist die neueste Version des Windo...
MySQL-Deadlock-Routine: inkonsistente Batch-Einfügereihenfolge unter eindeutigem Index
Vorwort Das Wesen eines Deadlocks ist Ressourcenw...
Lösen Sie das Problem beim Einstellen des Datums auf 0000-00-00 00:00:00 in MySQL 8.0.13
Ich habe gerade angefangen, Datenbankoperationen ...
Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes
Szenario mit dem Problem des Seitenumblätterns B ...
Die MySQL-Version ist niedriger als die, die keine zwei Werte vom Typ Zeitstempel unterstützt.
MySQL-Fehler: Fehlercode: 1293 Falsche Tabellende...
Installationshandbuch für VMware Workstation 15 Pro (für Anfänger)
01. VMware Workstation Pro 15 herunterladen Herun...