opacity

[pranshu82202]

I am using mozilla firefox.

 

i want to make a division transparent so i used the code

 

<style type="text/css">
#mydiv {
opacity: .2;
}
</style>

 

It is making the division almost transparent but the text which i hav written turned transparent also...

 

I also tried to put text in another division and setted it opacity to 1 but that too was not a success ..

 

Basically i want to make background a little transparent but not the text..

 

Tell me what should i do...

 

-pranshu.a.11@gmail.com

[JasonLewis]

Yeah pain in the ass that isn't it. Depending on your needs you can use rgba. Example:

 

#mydiv {
    background: rgba(0, 0, 0, 0.5);
}

[Frank P]

#mydiv {

    background: rgba(0, 0, 0, 0.5);

}

High-tech, but is that supported by older browsers (IE6/7, FF3.x and Chrome8+)?

[cssfreakie]

in case you want to have a fool proof crossbrowser solution, use a 1x1 .png in the color and transparancy you like and set that as background color on repeat

[pranshu82202]

FRANK P yes it is supported by all versions of google chrome and safari, mozilla 3.0+ and IE9

[cssfreakie]

FRANK P yes it is supported by all versions of google chrome and safari, mozilla 3.0+ and IE9

So atleast 30% of your audience can't enjoy it

[Frank P]

So atleast 30% of your audience can't enjoy it

 

Exactly. That's why I, too, would suggest to make a transparent image in Photoshop. Easy as 1,2,3, if you have a bit of a recent version.

[JasonLewis]

How about screw those guys on lame ass old browsers. Update or gtfo.

Unless of course you really really really need to ensure it has the opacity in an older browser. If not, just set a lighter gray as the background color then set the background to the rgba value. Degrades gracefully enough and those who aren't tadling around in the year 2000 can enjoy your nice div.

 

I honestly prefer anything that uses less http requests.

[Frank P]

How about screw those guys on lame ass old browsers. Update or gtfo.

I don't think my clients will agree with that...

 

I honestly prefer anything that uses less http requests.

HTTP requests hardly make a site render slowly. Large images, moving images, poor server capacity and bottle necks in the connection between the server and the user's computer do. This whole request issue is exaggerated tremendously. 

[JasonLewis]

How about screw those guys on lame ass old browsers. Update or gtfo.

I don't think my clients will agree with that...

 

That wasn't meant to be taken 100% seriously. Like I said, unless you need it to work in older browsers I'd use the rgba method. I still prefer the absolute minimum http requests.

[cssfreakie]

Jaysonic is totally right! 

 

So use conditional comments or something to target older browsers and apply new techniques for the new ones.

HTTP requests hardly make a site render slowly. Large images, moving images, poor server capacity and bottle necks in the connection between the server and the user's computer do. This whole request issue is exaggerated tremendously. 

 

have you got an idea what the impact is of using single images where you don't have to in for instance the following case.

I don't think you do, because the impact is huge!

 

anyway lets keep it on topic

[Frank P]

I don't think you do, because the impact is huge!

I never said one shouldn't use the sprite technique if possible. And in this case it isn't.