ansaurus

Question

How can I controle the visibility level of a div and make it see through?

Answer 1

+3 A:

You can use opacity in CSS

.transparent_class {
 opacity: 0.5;
}

I think there are some problems with opacity in Internet Explorer so here is example how to change transparency in IE:

.opaque1 { // for all other browsers
 opacity: .5;
}

.opaque2 { // for IE5-7
 filter: alpha(opacity=50);
}

.opaque3 { // for IE8
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

HTH

Pavel Nikolov 2010-01-26 07:57:47

Yes, but IE6, and perhaps 7, will barf on this. In those browsers, you don't set opacity without some javascript library or filter hack.

Squeegy 2010-01-26 07:59:16

This is one way, but it has the downside that all descendants inherit the same opacity. If you only want the background-color to be see-through, you can use `background-color: rgba(12, 34, 56, 0.5)` where the last number is the alpha channels value (0-1).

nikc 2010-01-26 08:00:41

Will this>>background-color: rgba(12, 34, 56, 0.5)<< be supported in all browsers?

MAK 2010-01-26 08:07:44

@MAK, no. See this: http://css-tricks.com/rgba-browser-support/

Tatu Ulmanen 2010-01-26 08:14:23

Answer 2

+1 A:

http://www.quirksmode.org/css/opacity.html

.opaque1 {  // for all other browsers
    opacity: .5;
}

.opaque2 {  // for IE5-7
    filter: alpha(opacity=50);
}

.opaque3 {  // for IE8
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

Squeegy 2010-01-26 08:01:20

Can I control the opacity of the background only? So the text in the div wouldn't be effected?

MAK 2010-01-26 08:03:56

In decent browsers, as `nikc` said, you can use rgba colors: `background-color: rgba(255,0,0,0.5) //transulcent red`. But again, IE will barf on this.This page has a snippet of another filter hack that will work in IE though: http://css-tricks.com/rgba-browser-support/But really you may have better luck with a semi transparent PNG image set to the color and opacity you want.

Squeegy 2010-01-26 08:08:56

transparent PNG! Very interesting trick!Would it work with all browsers?

MAK 2010-01-26 08:13:08

@MAK - in all but IE6 (at least, not without a hack - see DDBelatedPNG)

K Prime 2010-01-26 08:16:11

Answer 3

+2 A:

Another way to make only the background transparent is by using a transparent png as background-image, and then use this jQuery fix for the special snowflake IE. This works in all browsers as far as I know.

kemp 2010-01-26 08:08:53

ansaurus

tags:

views:

answers:

How can I controle the visibility level of a div and make it see through?

related questions