Kann der CSS-Selektor Bilder einfügen?

CSS-Selektoren können Bilder einfügen, z. B. die CSS-Selektoren „:before“ und „:after“. Die Einfügemethode besteht darin, das Inhaltsattribut zum Einfügen von Bildern zu verwenden, wobei eine Syntax wie „.p_beforeImg:before {content: '';“ verwendet wird. Hintergrund. .."}.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „CSS-Video-Tutorial“

CSS-Selektoren: before und :after können das Inhaltsattribut zum Einfügen von Bildern verwenden.

Das Inhaltsattribut wird mit den Pseudoelementen :before und :after verwendet, um generierten Inhalt am Kopf oder Ende des Elements einzufügen.

Beschreibung: Dieses Attribut wird verwendet, um generierte Inhalte zu definieren, die vor oder nach dem Element platziert werden. Standardmäßig handelt es sich dabei oft um Inline-Inhalte, aber die Art der Box, die dieser Inhalt erstellt, kann über das Anzeigeattribut gesteuert werden.

Verstehen Sie :before und :after

Standardanzeige: inline;

Das Inhaltsattribut muss festgelegt werden, sonst ist alles nutzlos ist user-select : none, d. h. der Inhalt von :before und :after kann vom Benutzer nicht ausgewählt werden

Pseudoelemente können in Kombination mit Pseudoklassen verwendet werden, z.

:before und :after wurden in CSS2 vorgeschlagen, sodass sie mit IE8 kompatibel sind.

::before und ::after sind in CSS3 geschrieben, um Pseudoklassen und Pseudoelemente zu unterscheiden.

Andere in CSS Pseudoelemente include::before, ::after, ::first-letter, ::first-line, ::selection usw.

kann nicht über DOM verwendet werden, es ist nur eine reine Darstellung. In besonderen Fällen wird der generierte Inhalt aus Zugriffssicht nicht durch die aktuelle Bildschirmauslesung unterstützt.

Beispiel 1: Fügen Sie vorher ein Bild mit Dreiecksspitze hinzu

Das obige ist der detaillierte Inhalt vonKann der CSS-Selektor Bilder einfügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!