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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: opacity
slug: Web/CSS/opacity
tags:
- CSS
- CSS Eigenschaft
- Referenz
translation_of: Web/CSS/opacity
---
<div>{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <strong><code>opacity</code></strong> CSS Eigenschaft gibt die Transparenz eines Elements an, d. h. den Grad, zu welchem der Hintergrund des Elements überlagert wird.</p>
<p>Der Wert wird dem gesamten Element zugewiesen einschließlich dessen Inhalten, auch wenn der Wert nicht durch Kindelemente geerbt wird. Dadurch haben ein Element und seine Kindelemente alle dieselbe Deckkraft relativ zum Hintergrund des Elements, auch wenn das Element und seine Kindelemente untereinander unterschiedliche Werte für die Deckkraft haben.</p>
<p>Wird für diese Eigenschaft ein Wert anders als <code>1</code> festgelegt, bewirkt dies, dass das Element in einen neuen <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapelkontext</a> versetzt wird.</p>
<p>Falls <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">ein Kindelement nicht den Wert für die Deckkraft haben soll</a>, kann stattdessen die {{cssxref("background")}} Eigenschaft verwendet werden. Zum Beispiel:</p>
<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* Komplett undurchsichtig */
opacity: 1;
opacity: 1.0;
/* Durchscheinend */
opacity: 0.6;
/* Komplett transparent */
opacity: 0.0;
opacity: 0;
/* Globale Werte */
opacity: inherit;
opacity: initial;
opacity: unset;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code><number></code></dt>
<dd>Ist eine {{cssxref("<number>")}} im Bereich von <code>0.0</code> bis <code>1.0</code>, beide einschließlich, die die Deckkraft des Alphakanals repräsentiert. Jeder Wert außerhalb des Intervalls, obwohl gültig, wird abgeschnitten auf die nächstliegende Grenze innerhalb des Bereichs.
<table class="standard-table">
<tbody>
<tr>
<th>Wert</th>
<th>Bedeutung</th>
</tr>
<tr>
<td><code>0</code></td>
<td>Das Element ist vollkommen transparent (d. h. unsichtbar).</td>
</tr>
<tr>
<td>Irgendeine {{cssxref("<number>")}} genau zwischen <code>0</code> und <code>1</code></td>
<td>Das Element ist durchsichtig (d. h. der Hintergrund scheint durch).</td>
</tr>
<tr>
<td><code>1</code></td>
<td>Das Element ist vollkommen opak (blickdicht).</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
<pre class="brush: css">div {
background-color: yellow;
}
.light {
opacity: 0.2; /* Der Text kann kaum über dem Hintergrund gelesen werden */
}
.medium {
opacity: 0.5; /* Der Text ist besser über dem Hintergrund lesbar */
}
.heavy {
opacity: 0.9; /* Der Text ist sehr deutlich über dem Hintergrund lesbar */
}
</pre>
<pre class="brush: html"><div class="light">Dies kann kaum gesehen werden.</div>
<div class="medium">Dies ist einfacher zu sehen.</div>
<div class="heavy">Dies ist sehr deutlich sichtbar.</div>
</pre>
<p>{{EmbedLiveSample('Einfaches_Beispiel', '640', '64')}}</p>
<h3 id="Andere_Deckkraft_mit_hover">Andere Deckkraft mit <code>:hover</code></h3>
<pre class="brush: css">img.opacity {
opacity: 1;
filter: alpha(opacity=100); /* IE8 and lower */
zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
}
img.opacity:hover {
opacity: 0.5;
filter: alpha(opacity=50);
zoom: 1;
}</pre>
<pre class="brush: html"><img src="//developer.mozilla.org/media/img/mdn-logo.png"
alt="MDN logo" width="128" height="146"
class="opacity">
</pre>
<p>{{EmbedLiveSample('Andere_Deckkraft_mit_hover', '150', '175')}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Definiert <code>opacity</code> als animierbar.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}</td>
<td>{{Spec2('CSS3 Colors')}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.properties.opacity")}}
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">MSDN Microsofts <code>filter:alpha(opacity=xx)</code></a></li>
</ul>
|
