Hi all, I've been trying out the CSS opacity function. I was just wondering if there are any major pitfalls to using it I hadn't considered? Also, I have a problem with it. When I set a div opacity, and divs nested withing it inherit the same opacity, and I can't seem to over-ride that. Is it just not possible, or is there a way round this? If there isn't a way round this, maybe they should consider it before it's released as standard code?
Most of the things to watch out for are to do with Internet Explorer, and its own proprietary filter rather than the CSS3 opacity property. Specifically, 1. IE6 and IE7 require hasLayout for the element which the filter is being applied to. If not, any alpha opacity directions from either CSS or JavaScript are ignored. In fact, for any of the IE filters, this is true. IE8 does not have this hasLayout requirement. To satisfy hasLayout, it is most common to just give the element a width, or to position it. 2. To make it work across all the IE6 to IE8 family, there are 2 filter declarations required - the first for IE8, the other for IE6-7 ... -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); Code (markup): Although the first declaration should validate because of the -ms- vendor prefix, the second will not validate, and generates warning messages in other browsers (after which they just ignore it, as they should). If validation is required however, it can be enclosed in IE conditional comments. 3. The inheritance of CSS3 opacity to child elements cannot be prevented, as you have pointed out. In that situation, if you want an enclosed element to be unaltered (or have its own declared opacity), you have to instead make that element a sibling of the opacity-styled element, and absolutely position the sibling over the top of the opacity element (so it only looks as if it is a child of the opacity element). Sometimes this forced inheritance of opacity effect can be broken in IE by setting position:relative to the child element, which will then fail to show the parent's alpha opacity. This could be either useful or not, but happens only in IE.
Try this one dear <html> <head> <style type="text/css"> div.background { width:500px; height:250px; background:url(klematis.jpg) repeat; border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } </style> </head>