ansaurus

Question

How can i give transparency effect in CSS ?

Answer 1

+10 A:

50% opacity IE:

filter: alpha(opacity = 50);

50% opacity other browsers:

opacity: .5;

David Hedlund 2009-11-25 11:29:48

progid:DXImageTransform.Microsoft.Alpha(Opacity=xx) for IE 6 if you want to support IE6.

Zoidberg 2009-11-25 11:31:35

How do I use this code in external CSS, so that it runs in all browsers.

vaibhav 2009-11-25 11:38:27

including any of these will not break anything for any other browser, so you can safely specify both: `.semiTransparent { filter: alpha(opacity = 50); opacity: .5; }`

David Hedlund 2009-11-25 11:42:30

thx a lot, this was very helpfull for me.

Shantanu Gupta 2009-11-25 12:24:55

where should i use this code. in css file filter is not a property.Where should i use it

Shantanu Gupta 2009-11-25 19:43:13

it's not a valid property, but IE will accept it. if you want certain css effects to work in IE, you sometimes have to disregard what properties actually exists in the specs

David Hedlund 2009-11-26 07:18:48

Answer 2

+2 A:

The problem with transparency settings in CSS, is that content/text is also semi-transparent, which makes for difficult reading.

A good "cheat" is to use a semi-transparent PNG as a background image for the div/cell. See http://blog.twipler.com for an example and an image from http://blog.twipler.com/twipler/siteimages/white-alpha-thick.png

Dead account 2009-11-25 11:30:59

This is true, unless you put the background image on a separate div that sits behind all the text.

Zoidberg 2009-11-25 11:33:03

That's true - but a little tricky to get the layout right (I've found).

Dead account 2009-11-25 11:36:48

this may be drifting off topic, but from your comment, Quigley, i thought i might add, something that i've found immensely useful, and often neglected, is that `position: absolute` will be positioned *relative to its closest positioned parent*. So if you want to make sure two elements are on top of eachother, you can put them in a container that has `position: relative` (leaving `top` and `left` untouched, so that it stays in place), and then have both contained elements absolutely positioned to `0,0`. when used in this very controlled manner, i think absolute positioning is quite acceptable.

David Hedlund 2009-11-25 11:45:11

@d but if you have a div with text of unknown lenght but fixed width, how do you set the height of the behind transparent element? Im always keen to improve my CSS.

Dead account 2009-11-25 16:06:26

ansaurus

tags:

views:

answers:

How can i give transparency effect in CSS ?

related questions