Verwenden Sie CSS2.1, um mehrere Hintergrund- und Randeffekte zu erzielen
Verwenden Sie CSS2.1, um den Effekt von 3 Hintergrundbildern und 2 Inhaltsbildern auf einem einzelnen HTML-Element oder den Effekt mehrerer Rahmen zu erzielen. Diese progressive Verbesserungsmethode gilt für alle Browser, die CSS2.1-Pseudoelemente und ihre Positionierungsattribute unterstützen. Es ist keine CSS3-Unterstützung erforderlich.
Demo: Mehrere Hintergründe mit CSS2.1
Unterstützte Browser: Firefox 3.5+, Safari 4+, Chrome4+, Opera10+, IE8+
Wie wird dies erreicht?
Im Wesentlichen sind die von uns erstellten Pseudoobjekte (:before und :after) dieselben wie die Art und Weise, wie wir verschachtelte HTML-Elemente behandeln. Sie haben jedoch einen einzigartigen Vorteil gegenüber verschachtelten HTML-Elementen: Sie sind nicht semantisch.
Wenn wir mehrere Hintergründe oder mehrere Rahmen verwenden, müssen wir den Inhalt der Pseudoelementebene hinter dem Inhalt des HTML-Elements mithilfe absoluter Positionierung fixieren.
Inhalte, die nicht real sind, werden zur Positionierung in Pseudoelementen enthalten. Dies bedeutet, dass sie sich innerhalb der Grenzen des „übergeordneten“ Elements frei erstrecken können, ohne dessen Inhalt zu beeinträchtigen. Dadurch können die Werte „oben“, „rechts“, „unten“, „links“, „Breite“ und „Höhe“ der absoluten Positionierung beliebig kombiniert werden. Der Hauptschlüssel besteht darin, dass ihre Kombinationsleistung flexibel ist.
Welche Effekte können erzielt werden?
Sie müssen sich nur auf ein HTML-Element und zugehörige Bilder verlassen, um Dinge wie mehrere Hintergrundfarben, mehrere Hintergrundbilder, Hintergrundbildausschnitte, Bildspiegelungen, erweiterbare Boxmodelle mithilfe von Bildrändern und schwebende gefälschte Spalten zu erstellen (Anmerkung von Xiaozhi: Die dreispaltigen Gleichhöheneffekt (der später erwähnt wird), Bilder außerhalb des Boxmodells, mehrere außen angezeigte Ränder und andere beliebte Effekte. Möglicherweise sind 2 zusätzliche Inhaltsbilder im generierten Inhalt erforderlich.
Die mehreren Hintergründe mit CSS2.1 und die mehreren Rahmen mit CSS2.1-Demoseiten zeigen, wie man mit der CSS2.1-Pseudoobjekttechnologie diese beliebten Effekte erzielen kann.
Die meisten Strukturen enthalten untergeordnete Elemente. Daher können Sie oft mehr Effekte durch Pseudoelemente anzeigen, die das erste untergeordnete Element des übergeordneten Elements sind (als letztes untergeordnetes Element festgelegt). Darüber hinaus können Sie :hover auch verwenden, um einige komplexe interaktive Effekte auf den Stil zu erzeugen.