PDA

Click to See Complete Forum and Search --> : opacity



drunknbass
12-09-2006, 12:24 AM
i was playing with a design site design today and need to do semi transparent divs with text and or images in them and dont think its possible using a filter to adjust opacity. when i do that it effects anything in the div also. i was hoping there would be a css way to do it without resorting to using png as bg images but so far havent made it work.. any tips to get around the div changing its contents opacity also?

1stbite
12-09-2006, 05:22 PM
if its text and images you want at 100% and the background at semi transparency, then only way to do it that i know of is to use absolute positioning and z-index, layer the transparecy layer at a level below your main div content.

CSS


#transparency_div {
position:absolute;
top:0;
left:0;
width:200px;
height:330px;
padding:10px;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50 );
-moz-opacity: 0.50;
opacity:0.5;
background-color: #000;
z-index: 1;
}
#content {
color: #FFFFFF;
background-color: inherit;
position:absolute;
top:0;
left:0;
width:200px;
height:330px;
background:transparent;
padding:10px;
overflow: auto;
z-index: 999;
}

HTML


<div id="transparency_div"></div>
<div id="content">Text here<br /><img src="image.jpg" alt="" /></div>

aversion
12-10-2006, 07:40 AM
It's worth adding that for IE you must have a width or height set for the element you're applying opacity to. Doing this triggers IE into layout mode where the filter is valid.

JPnyc
12-10-2006, 09:48 PM
-moz-opacity is no longer needed, unless you want it to work in very old browsers. Gecko has supported just plain opacity for quite a while, as has Safari.

drunknbass
12-14-2006, 07:01 PM
i figured thats what would get it to work, but i didnt try that yet cause everything else failed. so ill give it a shot.. thanks.

drunknbass
12-18-2006, 11:01 PM
i dont think that code works.. seems ie7 and ff2.0 dont work it the same.. seems to work in ie but ff applies the filter to everything

1stbite
12-20-2006, 05:43 PM
Works fine here... tested in:

FF 2.0 (not tested 1.5 and below)
IE 5.5, 6.0 and 7.0 (5.01 and below has no support)
Opera 9 (Opera has no support in Opera 8 and below)
Netscape 7 and 8 (not tested 6 and below)

Code tested:


<body>
<head>
<style type="text/css">
<!--
#transparency_div {
position:absolute;
top:0;
left:0;
width:200px;
height:330px;
padding:10px;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50 );
-moz-opacity: 0.50;
opacity:0.5;
background-color: #000;
z-index: 1;
}
#content {
color: #FFFFFF;
background-color: inherit;
position:absolute;
top:0;
left:0;
width:200px;
height:330px;
background:transparent;
padding:10px;
overflow: auto;
z-index: 999;
}
-->
</style>
</head>

<body>
<img src="image.jpg" width="350" height="350" /></div>
<div id="transparency_div"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam in tellus. Integer eleifend felis. Sed non ipsum. In sed erat. Nulla vel augue sit amet augue semper elementum. Aenean feugiat, diam et tincidunt facilisis, elit libero mollis pede, ac tincidunt nibh turpis sed ipsum. Aliquam erat volutpat. Praesent sodales mi nec quam. Nunc libero. Quisque ut lectus.<br />
<img src="image.jpg" width="50" height="50" /></div>
</body>
</html>

drunknbass
12-20-2006, 11:19 PM
i used it but i have to make the positioning relative. the whole page is dynamic.
check it out. http://www.deathtodesign.com/mc/product_info.php?cPath=1&products_id=1

and i cant get the div that holds the product pic to work right in FF 2.0 and the float doesnt work

in ie7 it looks right except the opacity issue.
and opera is the same as ie except for text alignment which is no biggie