Die Transparenz der Farbe kann über rgba() und hsla() eingestellt werden, sie können die Transparenz jedoch nur beim Definieren der Farbe festlegen und können die Transparenz für Bilder oder andere Elemente nicht festlegen.
Zwei Möglichkeiten, Transparenz mit CSS festzulegen:
1. CSS rgba() legt die Farbtransparenz fest
Grammatik:
rgba(R,G,B,A);
RGBA ist die Abkürzung für die drei Wörter Red (Rot), Green (Grün), Blue (Blau) und Alpha (Opazität). RGBA-Farbwerte sind eine Erweiterung der RGB-Farbwerte mit einem Alphakanal, der die Deckkraft des Objekts angibt.
Einführung in die Werte in rgba():
R: Rotwert. Positive ganze Zahl (0~255)
G: Grünwert. Positive ganze Zahl (0~255)
B: Blauwert. Positive ganze Zahl (0~255)
A: Transparenz. Der Wert liegt zwischen 0 und 1
rgba() kann einfach die Farbtransparenz festlegen, was viele Anwendungen im Seitenlayout hat. Beispiel: Machen Sie den Hintergrund transparent, der Text darüber ist jedoch undurchsichtig.
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>dotcpp programming</title><style>.demo{width:350px;height:300px;margin:50pxauto;}.demo*{width :120px;height:120px;margin:10px;float:left;}.demo1{background:rgba(255,0,0,1);}.demo2{background:rgba(255,0,0,0.5);} </style></head><body><divclass=demo><divclass=demo1>Die Hintergrundfarbe ist undurchsichtig und der Text ist undurchsichtig! </div><divclass=demo2>Die Hintergrundfarbe ist halbtransparent und der Text ist undurchsichtig! </div></div></body></html>Laufergebnisse:
Im obigen Beispiel sind die eingestellten Farbwerte gleich, die Transparenz ist jedoch unterschiedlich.
2. Das CSS-Opazitätsattribut legt die Hintergrundtransparenz fest
Grammatik:
Deckkraft:Wert;
Wert: Gibt die Deckkraft an, von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).
Das opacity-Attribut wird vererbt und macht alle Elemente im Container transparent;
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Deckkraftattribut</title><style>.demo{width:280px;height:140px;margin:50pxauto;}.demo1,.demo2 {width:120px;height:120px;margin:10px;float:left;background:#2DC4CB;}.demo1{opacity:1;}.demo2{opacity:0.5;}</style></head><body> <divclass=demo><divclass=demo1><p>Die Hintergrundfarbe ist undurchsichtig und der Text ist undurchsichtig! </p></div><divclass=demo2><p>Die Hintergrundfarbe ist transparent und der Text ist auch transparent! </p></div></div></body></html>Laufergebnisse:
Deckkraft:0,5; macht alle Elemente des Demo2-Containers durchscheinend.
Zusammenfassung: Obwohl sowohl die rgba()-Methode als auch die Opazitätsmethode Transparenzeffekte erzielen können, wirkt sich rgba() nur auf die Farbe des Elements oder seine Hintergrundfarbe aus (die untergeordneten Elemente des Elements mit festgelegter rgb()-Transparenz erben diese nicht Transparenzeffekt); und Opazität wird vererbt, wirkt sich nicht nur auf das Element selbst aus, sondern macht auch alle Unterelemente innerhalb des Elements transparent.