[rsp]

Hola gurus!

Stött på ett irriterande problem angånde opacitet på bakgrunder i CSS och försöka få synlig text.

Vill alltså ha en box med genomskinlig bakgrundsbild i sedan lägga en box i med 100% synlig text i, men får inte texten att bli 100% synlig utan den tonas också bort <_<

Kodsnutt för bakgrunden:

#box_bakgrund
{

	width: 300px;
	height: 300px;
	background: #333333;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

Kodsnutt för texten:

#box_text
{
position:relative;
	width: 200px;
	height: 200px;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
color:#FFFFFF;
}

HTML-koden

<div id="box_bakgrund">
<div id="box_text">
Sho breeee!
</div>
</div>

Tacksam för hjälp, suttit ett tag o testat det mesta google gav mig :/

[WebboT]

Jag Googlade och detta kom upp:
http://www.w3schools.com/Css/css_image_tra...ransparency.asp
scrolla ner till exempel 3.....kanske kan va nåt?

[martine]

Det "rätta" svaret är att opacity är css3 och i så fall är det genomskinlighet för bakgrunden du vill ha - sätt i så fall bakgrundsfärgen med rgba() istället för opacity (du vill ju inte att boxen med sitt innehåll ska bli genomskinlig utan att bakgrundsfärgen ska vara halvt genomskinlig). Problemet med detta är förstås att css3 inte stöds alls i IE och stödet för rgba() är ganska begränsat (till Firefox och Safari för tillfället har jag för mig). Antingen får du vänta tills alla webbläsare får stöd eller gå runt det.

Det finns ju sätt att gå runt det (genom positionering eller genomskinliga enfärgade png24r)

Edit: såg att du efterfrågade en genomskinlig bild och inte en färg - spara bilden som en genomskinlig png24 och ta bort opacity så har du löst det.

[rsp]

Det "rätta" svaret är att opacity är css3 och i så fall är det genomskinlighet för bakgrunden du vill ha - sätt i så fall bakgrundsfärgen med rgba() istället för opacity (du vill ju inte att boxen med sitt innehåll ska bli genomskinlig utan att bakgrundsfärgen ska vara halvt genomskinlig). Problemet med detta är förstås att css3 inte stöds alls i IE och stödet för rgba() är ganska begränsat (till Firefox och Safari för tillfället har jag för mig). Antingen får du vänta tills alla webbläsare får stöd eller gå runt det.

Det finns ju sätt att gå runt det (genom positionering eller genomskinliga enfärgade png24r)

Älskar ingående svar, inte nog med att jag löste problemet, jag blev lite visare på vägen

Sa emot mig själv lite där frågade efter bild men skrev färg i koden. Löste det iaf med en genomskinlig .png. Opac 1% blev en lagom skön glasskiva!

Tack!

[martine]

Originally posted by rsp@May 15 2008, 17:21
Älskar ingående svar, inte nog med att jag löste problemet, jag blev lite visare på vägen

Tackar och bockar - kul när man kan hjälpa till! B)