Zusammenfassung der Hintergrundtransparenz- und Textundurchsichtigkeitseffekte mithilfe von CSS

Die Verwendung transparenter und undurchsichtiger Stile wurde schon sehr früh im Projektentwicklungsprozess populär. Mittlerweile ist es ein Effekt, den jeder kennt. Der Transparenzeffekt wird nicht nur in Bildern verwendet, sondern auch an verschiedenen Stellen. Mit CSS lassen sich auch problemlos Kompatibilitätseinstellungen für verschiedene Browser erreichen. Manchmal wird es verwendet, um eine Texteinleitung auf das Hintergrundbild zu setzen. Es ist notwendig, dass das Hintergrundbild transparent und der Text undurchsichtig ist. In den folgenden Kapiteln werden wir über die Verwendung von CSS sprechen, um den Effekt transparenter Hintergrundbilder und undurchsichtiger Texte zu erzielen.

Hintergrundtransparenz und undurchsichtige Texteffekte

1. Verwenden Sie CSS, um einen transparenten Hintergrund zu erzielen Bilder Es gibt zwei Möglichkeiten, Text undurchsichtig zu machen

Methode 1 (Milchglaseffekt): Hintergrundbild + Pseudoklasse + flite:blur(3px)

Methode 2 (durchscheinender Effekt) : Hintergrundbild + Positionierung + Hintergrund:rgba(255,255,255,0.3)

Zwei Methoden, um mit CSS transparentes Hintergrundbild und undurchsichtigen Text zu erzielen

2. CSS, um transparenten Hintergrund und undurchsichtigen Text zu erzielen Text (Kompatibel mit allen Browsern)

In neueren Browsern wie FF/Chrome können Sie den RGBA des CSS-Attributs Hintergrundfarbe verwenden, um auf einfache Weise einen transparenten Hintergrund zu erzielen, während der Text undurchsichtig bleibt. IE6/7/8-Browser unterstützen RGBA nicht und können dies nur mit dem exklusiven Filter filter:Alpha von IE erreichen. Diese Schreibweise macht den Text jedoch transparent, sodass er nur innerhalb der untergeordneten Knoten des transparenten verwendet werden kann Container (außer Textknoten). Position festlegen: relativ, um den Transparenzfilter seines übergeordneten Elements nicht zu erben.

3.

So erreichen Sie transparenten Hintergrund und undurchsichtigen Text in CSS

Es gibt normalerweise drei Möglichkeiten, transparentes CSS zu erreichen %

Deckkraft von CSS3: bis 1, z. B. rgba(255,255,255,0,8)

IE-Exklusivfilter filter:Alpha(opacity=x), der Wert von x liegt zwischen 0 und 100, z als Filter:Alpha(opacity=80)

4 -moz-opacity:0.8; /*Elemente in Firefox-Transparenz festlegen

filter: alpha(opacity=80); /*dh einen Filter verwenden, um die Transparenz festzulegen

Aber wenn wir den Hintergrund festlegen Transparenz eines Etiketts, oft möchten wir nicht, dass das Etikett transparent ist. Auch Text und Bilder sind durchscheinend geworden. 5.

Vollständiger Code zur Implementierung der CSS3-Deckkraft

Wertbeschreibung:

1. | Einheit Der aus Zeichen zusammengesetzte Längenwert. Es kann kein negativer Wert sein und der Standardwert ist 1. Wenn der Deckkraftwert 1 ist, ist das Element vollständig undurchsichtig; wenn der Wert 0 ist, ist das Element vollständig transparent und unsichtbar.

2. Erben bedeutet Vererbung, also das Erben der Deckkraft des übergeordneten Elements.

3. Für den IE-Browser können Sie seinen privaten Attributfilter verwenden, um kompatibel zu sein: filter: alpha (alpha=value);.

Verwandte Fragen und Antworten

1

CSS macht den Hintergrund transparent und den Inhalt undurchsichtig

2. Der Leinwandhintergrund ist undurchsichtig, aber einige Elemente im Inneren sind transparent (ähnlich einem Hohleffekt)3.

So machen Sie den CSS-Hintergrund transparent und den Text undurchsichtig

[Verwandte Empfehlungen 】

1. Kostenlose Video-Tutorials auf der chinesischen PHP-Website: "php.cn Dugu Jiujian (2)-CSS-Video-Tutorial"

2. Verwandte Artikel auf der chinesischen PHP-Website:Zusammenfassung der Transluzenzeinstellungen in CSS

Das obige ist der detaillierte Inhalt vonZusammenfassung der Hintergrundtransparenz- und Textundurchsichtigkeitseffekte mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!