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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<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> |
Pingback: CSS3 Farb-Transparenz mit RGBA | CSS3.de