opacity, Probleme mit nachfolgendem Image

[Michi]

Ich habe ein Problem mit opacity, ich möchte einen Hintergrund durchsichtig erscheinen lassen, aber das Bild das auf dem Hintergrund liegt soll natürlich wieder voll zu sehen sein.

#box {
position: absolute;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
width:100%;
text-align: center;
}

#box img{
background:#000;
opacity:1.0;
filter:alpha(opacity=100);
}

<div id="box">
<img src="images.jpg" alt="" />
</div>

[Matthias Apsel]

Om nah hoo pez nyeetz, Michi!

Ich habe ein Problem mit opacity, ich möchte einen Hintergrund durchsichtig erscheinen lassen, aber das Bild das auf dem Hintergrund liegt soll natürlich wieder voll zu sehen sein.

Works as desingned. Wiki

Matthias

[MudGuard]

Hi,

Om nah hoo pez nyeetz, Michi!

Ich habe ein Problem mit opacity, ich möchte einen Hintergrund durchsichtig erscheinen lassen, aber das Bild das auf dem Hintergrund liegt soll natürlich wieder voll zu sehen sein.

Works as desingned. Wiki

Was mir da spontan fehlt auf der Wikiseite ist eine Kurzzusammenfassung:
a la

Values <alphavalue> | inherit
Initial value 1
Applies to All elements
Inherited No

Und weil ich sehen wollte, ob das allgemein so ist, hab ich noch bei border-width geschaut, und das hier gefunden:

Mit border-width: können Sie die Dicke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:

Nein, eine numerische Angabe ist nicht erlaubt. border-width: 0.2; darf nicht sein. Es muß eine Längenangabe sein (Zahl + Längeneinheit) - das schließt dann auch gleich die Prozentwerte aus.

cu,
Andreas

[Der Martin]

Hallo,

[border-width]
Nein, eine numerische Angabe ist nicht erlaubt. border-width: 0.2; darf nicht sein. Es muß eine Längenangabe sein (Zahl + Längeneinheit) - das schließt dann auch gleich die Prozentwerte aus.

ich verstehe, was du meinst und stimme inhaltlich zu - aber bisher habe ich Maßangaben (also Zahl mit Maßeinheit) auch immer als numerisch betrachtet. Nichtnumerisch sind nach meinem Verständnis Angaben wie "sehr schmal".

Ciao,
 Martin

[MudGuard]

Hi,

ich verstehe, was du meinst und stimme inhaltlich zu - aber bisher habe ich Maßangaben (also Zahl mit Maßeinheit) auch immer als numerisch betrachtet.

Ja, man kann 3px von mir aus noch als numerisch auffassen, aber: reine Zahlen ohne Einheit sind auch numerisch. Und die sind eben da, wo Längenangaben erwartet werden, nicht erlaubt.

cu,
Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, MudGuard!

Was mir da spontan fehlt auf der Wikiseite ist eine Kurzzusammenfassung:
a la

Values <alphavalue> | inherit
Initial value 1
Applies to All elements
Inherited No

Die gibt es bei den Referenzen, allerdings noch sehr unvollständig.
[Ihre wertvollste Spende … (Vorschau)]

Nein, eine numerische Angabe ist nicht erlaubt. border-width: 0.2; darf nicht sein. Es muß eine Längenangabe sein (Zahl + Längeneinheit) - das schließt dann auch gleich die Prozentwerte aus.

Ja, in der Referenz zu border-width ist es korrekt.

Matthias

[MudGuard]

Hi,

Was mir da spontan fehlt auf der Wikiseite ist eine Kurzzusammenfassung:
a la

Values <alphavalue> | inherit
Initial value 1
Applies to All elements
Inherited No

Die gibt es bei den Referenzen, allerdings noch sehr unvollständig.

Ah, da gibt's noch was anderes zu opacity. Dann könnte es sinnvoll sein, die beiden Seiten gegenseitig zu verlinken.

Ja, in der Referenz zu border-width ist es korrekt.

jein. Prozentangaben sind in Längenangaben nicht enthalten, also ergibt "1 - 4 nicht negative Längenangaben, jedoch keine Prozentwerte" keinen Sinn - da in Längenangaben sowieso keine Prozentangaben enthalten sind, braucht man sie nicht extra ausschließen.

1 - 4 nicht negative Längenangaben, jedoch keine Prozentwerte
    1 - 4 Schlüsselwörter thin, medium, thick
    inherit

ist auch was anderes als das w3c erlaubt.
Nach Angabe im Self-Wiki ist
1px thin medium 3em nicht erlaubt, da das weder zu 1-4 Längenangaben noch zu 1-4 Schlüsselwörter paßt.

1-4 <border-width>
  inherit

mit

<border-width>:
 nicht-negative Längenangabe
 eines der Schlüsselwörter thin, medium, thick

erlaubt Mischung von Längenangaben und Schlüsselwort (und so ist es auch beim w3c angegeben).

cu,
Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, MudGuard!

Ah, da gibt's noch was anderes zu opacity. Dann könnte es sinnvoll sein, die beiden Seiten gegenseitig zu verlinken.

Von Referenz zur allgemeinen Artikel ist der Link vorhanden, in die andere Richtung könnte es ein „siehe auch“ geben

Ja, in der Referenz zu border-width ist es korrekt.
jein.

Es ist nicht einfach, vereinfachende Formulierungen zu finden, wenn man <border-width> vermeiden möchte.

Wie schon oft gesagt, du kannst nichts kaputt machen.

Matthias

[Matthias Scharwies]

Ich habe ein Problem mit opacity, ich möchte einen Hintergrund durchsichtig erscheinen lassen, aber das Bild das auf dem Hintergrund liegt soll natürlich wieder voll zu sehen sein.

Opacity wird an die Kind-Elemente vererbt.

Stell die Farbe bei

#box{  
background: #000; /* Fallback IE 6-8 */  
background: rgba(0, 0, 0, .5);  
}

halb durchscheinend ein.

LG Matthias

[MudGuard]

Hi,

Opacity wird an die Kind-Elemente vererbt.

Nein. opacity wird NICHT vererbt. Siehe http://www.w3.org/wiki/CSS/Properties/opacity

Es wird das Element mitsamt dem Inhalt gezeichnet, und dann auf das Ergebnis opacity angewandt.

cu,
Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, MudGuard!

Es wird das Element mitsamt dem Inhalt gezeichnet, und dann auf das Ergebnis opacity angewandt.

Und zwar sogar dann, wenn ein Nachfahrenelement durch Positionierung außerhalb der Elternbox dargestellt wird.

<p style="opacity: 0">  
  <span style="opacity: 1">Dieser Inhalt ist nicht zu sehen.</span>  
</p>

Matthias