CSS3 opacity – Transparenz den Elementen und Farben

Mit der opacity-Eigenschaft können wir die Transparenz eines Elementes festlegen. Mögliche Werte der Eigenschaft sind die Dezimalzahlen von 0.0 bzw. 1.0, was einer Transparenz von 100% bis 0% entspricht (opacity 0.0 = völlige Transparenz, opacity 1.0 = keine Transparenz). Die jeweilige Transparenz wird auf alle Child-Elemente vererbt. Dieses kann man anhand des folgenden Beispiels gut betrachten und verstehen, auch der Text innerhalb des DIV-Containers ist von der Transparenz betroffen.

opacity: 0.1

opacity: 0.2

opacity: 0.3

opacity: 0.4

opacity: 0.5

opacity: 0.6

opacity: 0.7

opacity: 0.8

opacity: 0.9

opacity: 1.0

 

Quelltext:

<style><!--
[class^="css3opacity"] {
width: 455px;
height: 80px;
color:#000;
background: orange;
border-top: 1px dotted #000;
border-left: 1px dotted #000;
border-right: 1px dotted #000;
}
[class="css3opacity10"] {
border-bottom: 1px dotted #000;
}
[class$="opacity1"] {
opacity: 0.1;
}
[class$="opacity2"] {
opacity: 0.2;
}
[class$="opacity3"] {
opacity: 0.3;
}
[class$="opacity4"] {
opacity: 0.4;
}
[class$="opacity5"] {
opacity: 0.5;
}
[class$="opacity6"] {
opacity: 0.6;
}
[class$="opacity7"] {
opacity: 0.7;
}
[class$="opacity8"] {
opacity: 0.8;
}
[class$="opacity9"] {
opacity: 0.9;
}
[class$="opacity10"] {
opacity: 1.0;
}
--></style>
<div class="css3opacity1"><p>opacity: 0.1</p></div>
<div class="css3opacity2"><p>opacity: 0.2</p></div>
<div class="css3opacity3"><p>opacity: 0.3</p></div>
<div class="css3opacity4"><p>opacity: 0.4</p></div>
<div class="css3opacity5"><p>opacity: 0.5</p></div>
<div class="css3opacity6"><p>opacity: 0.6</p></div>
<div class="css3opacity7"><p>opacity: 0.7</p></div>
<div class="css3opacity8"><p>opacity: 0.8</p></div>
<div class="css3opacity9"><p>opacity: 0.9</p></div>
<div class="css3opacity10"><p>opacity: 1.0</p></div>

Kommentar (1)

  1. Pingback: CSS3 Farb-Transparenz mit RGBA | CSS3.de

Kommentare sind geschlossen.