WN - CSS Opacitetsproblem

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS Opacitetsproblem (https://www.wn.se/forum/showthread.php?t=29320)

rsp	2008-05-15 02:04

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:

Kod:

#box_bakgrund

{



        width: 300px;

        height: 300px;

        background: #333333;

        filter: alpha(opacity=50);

        -moz-opacity: 0.5;

        opacity: 0.5;

}

Kodsnutt för texten:

Kod:

#box_text

{

position:relative;

        width: 200px;

        height: 200px;

        filter: alpha(opacity=100);

        -moz-opacity: 1.0;

        opacity: 1.0;

color:#FFFFFF;

}

HTML-koden

Kod:

<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

2008-05-15 04:06

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

2008-05-15 13:32

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 png24:or)

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	2008-05-15 17:21

Citat:

Ä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

2008-05-15 17:27

Citat:

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)

Alla tider är GMT +2. Klockan är nu 00:23.