CSS-Opazitätseigenschaft und Bildopazität erklärt

Die opacityEigenschaft steuert, wie undurchsichtig ein Element auf einer Skala von 0,0 bis 1,0 ist. Je niedriger der Wert, desto transparenter ist das Element.

Sie können wählen, inwieweit Sie das Element transparent machen möchten. Sie müssen die folgende CSS-Eigenschaft hinzufügen, um die Transparenzstufen zu erreichen.

Völlig undurchsichtig

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

Halbtransparent

.class-name { opacity: 0.5; }

Völlig transparent

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

Alternativ können Sie rgbadie Deckkraft eines Elements festlegen:

.class-name{ background-color: rgba(0, 0, 0, .5); }

Dadurch wird das background-colorElement mit einer Deckkraft von 50% auf Schwarz gesetzt. Der letzte Wert in einem rgbaWert ist der Alpha-Wert . Ein Alpha-Wert von 1 entspricht 100% Deckkraft und 0,5 (oder 0,5 wie oben) entspricht 50% Deckkraft.

Bildopazität und Transparenz

Mit dieser opacityEigenschaft können Sie ein Bild transparent machen, indem Sie die Undurchsichtigkeit verringern.

Opacity nimmt einen Wert zwischen 0,0 und 1,0 an.

1.0 ist der Standardwert für jedes Bild. Es ist völlig undurchsichtig.

Beispiel

img { opacity: 0.3; }

Fügen Sie filter: alpha(opacity=x)für IE8 und früher. Das x nimmt einen Wert von 0-100 an.

img { opacity: 0.3; filter: alpha(opacity=30); }

Hier ist ein Beispiel für ein Bild, das auf die Parameter im obigen Beispiel eingestellt ist.

Bild bei 30% Deckkraft

Sie können paaren opacitymit :hovereinem dynamischen Mouse-Over - Effekt zu erzeugen.

Beispiel:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Ein Codepen-Beispiel für ein transparentes Bild, das beim Schweben undurchsichtig wird

Sie können den gegenteiligen Effekt mit weniger Code erzielen, da das Bild standardmäßig eine Deckkraft von 1,0 hat

Beispiel:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

Hier ist ein Codepen-Beispiel, um Transparenz beim Mouseover zu zeigen.

Mehr über CSS

Cascading Style Sheets (CSS)

CSS ist eine Abkürzung für Cascading Style Sheets. Es wurde erstmals 1996 erfunden und ist heute eine Standardfunktion aller gängigen Webbrowser.

Mit CSS können Entwickler steuern, wie Webseiten aussehen, indem sie die HTML-Struktur dieser Seite „stylen“.

CSS-Spezifikationen werden vom World Wide Web Consortium (W3C) verwaltet.

Sie können einige ziemlich erstaunliche Dinge allein in CSS erstellen, wie zum Beispiel dieses reine CSS-Minesweeper-Spiel (das kein JavaScript verwendet).