No, but if you check the following areas, you might find it: http://www.stylegala.com/resources/
http://www.cssbeauty.com/links/
hope it helps a lit
Before I tell you how to do this, I have to highly recommend you reconider using opacity because it is a CSS3 propery and is not supported in all browsers.
Specify opacity: 0.7; on the div, and then on everything inside it specify opacity: 1;
Thread Starter
khaled
(@khaled)
Yeah but I’ve seen examples of working for safari, mozilla and ie. You just need to declare it 3 times. Also just tried having opacity 1 in the centre div, doesn’t seem to work…
Khaled,
The following link should help you on your way.
Update: That link actually doesn’t solve your problem as I misread your question. Back to the drawing board.
I never could get this to work “right”.
Thread Starter
khaled
(@khaled)
Hey Phu, already checked those, I’m obviously missing something fundamental, so here’s some code maybe someone can see my flaw:
Now behind this div is the background image that I would like it to see through to essentially.
CSS:
#sidebar{
margin: 220px 2px 0 2px;
width: 265px;
float: right;
background: #F2F2F2 url(images/sidebar.gif) repeat-y;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
font-size: 10px;
color: #424242;
}
.sidebaritems{
margin: 10px 10px 0 10px;
padding: 0 0 20px 0;
background: url(images/seperator.jpg) repeat-x bottom;
}
.emmortel{
margin: 10px 0 0 0;
height: 49px;
background-color: transparent;
}
.emmortel a {
display: block;
background: #fff url(images/emmortelb&w.jpg) no-repeat ;
height: 49px;
width: 244px;
margin: 0 auto;
}
.emmortel a:hover {
background: url(images/emmortelcolour.jpg) no-repeat ;
}
HTML:
<div id=”sidebar”>
<div class=”sidebaritems”>
<div class=”emmortel”> </div>
</div>
</div>
</div>
What happens is that due to the original declaration, ALL the subsequent divs have that transparency slapped onto them as well. Including all hover images etc (and normal images involved).
Thread Starter
khaled
(@khaled)
Actually found this reply which basically tells me to go back to the drawing board :), simply put it can’t be done properly.
Go to this forum page
Opacities (-moz-opacity in earlier moz versions, -khtml-opacity in saf1.1, opacity in current saf and moz versions, filter:alpha(opacity:#) in iew) are set on a whole element, not just the background. Opacities are nesting but not inheriting, meaning that an element with 50% opacity nested within another element with 50% opacity will end up being 25% opacity. According to the relevant CSS specs, opacities are normalised to be within the 0%-100% range, thus you can never get any part of an element to have a higher opacity than the base opacity of it’s ancestors. If you want to use partial opacities for only backgrounds, there are today three choices: use CSS3 RGBA colours for the background (saf1.2 only), use alpha channel PNG for background (moz, op, saf, iem but not iew), or use a gif where you mix transparent and non-transparent pixels so that it looks like a partial transparency. There is a trick that might work for getting alpha channel PNG to work in ie5.5w and ie6.0w, that relies on using the AlphaImageLoader filter to generate the proper background opacity, though.
Looks like it’s not really feasible in a practical way then… Thanks Khaled for the info.
FYI, -moz-opacity and -khtml-opacity are no longer needed in Mozilla, Safari, or Konquerer. They were only there while in testing and not confirmed for the next spec.
