opacity des backgroundimage soll nicht die Schrift beeinflussen

[frankmehlhop]

Hi,

ich habe folgendes css:

#main {background-color:#FFF;
background-image:url(../images/papierkorb.jpg); background-size: 100% auto;
opacity: 0.5;
background-repeat:no-repeat; }​

Das Hintergrundbild wird transparent, aber die Schrift leider auch.
Was kann ich tun, damit nur das Bild mit Transparenz dargestellt wird?

 

[Tronjer]

Opacity vererbt sich nach unten.

Ich würde die Transparenz des Bildes per Photoshop einstellen.

 

[frankmehlhop]

Danke!

 

[djheke]

Zitat deiner Seite (Entwickler und Informatiker)
Versteh deine Frage nicht.

 

[Flemli200]

Nun... Dieses Forum richtet sich nicht nur an Neulinge... Und als Entwickler ist man Programmierer und nicht unbedingt ein CSS crack [emoji14]

Mein Tipp... Du könntest, wenn du das so umsetzen möchtest ein weiteres Element (vllt. Einen Span) in #main einbinden.
Sagen wir Bsp. .Background .

Nun kannst du das alles in .Background formatieren.
Der Vorteil der daraus entsteht wäre, das du diese Class an mehreren Stellen nutzen kannst und damit auch das Bild. (Oh... Und du kannst ziemlich nette Effekte mit dem Bild generieren bsp. Mit Transition ;) )

Andernfalls kannst du das auch einfach mit einem Bildbearbeitungsprogramm erledigen ;)

 

[Nitamud]

Nun,

dies ändert aber auch nichts an den Eigenschaften von opacity.

Die einzige mir derzeit bekannte Möglichkeit dies zu realisieren ist der alpha-channel des HSL/RGB Farbschemas, welcher nicht vererbt wird, nur dort kommt einem die Unterstüzung in den Browsern momentan on die Quere.

 

[Flemli200]

Ja... Einfarbig könnte man das auch mit rgba lösen...

Und das Problem ist bei dem Konstrukt:
<div ID=Main>
<span class=background>
</span>
</div>
schon irgendwie gelöst ;) [emoji14]

Theoretisch könnte man das auch mit einem ::before incl. content:" " lösen. Habe nicht getestet... Aber dann sollte ja der Overflow Wert nicht vererbt werden und wir sparen uns einen Span im Code ;)