Title: CSS Opacity Last modified: August 18, 2016 --- # CSS Opacity * [khaled](https://wordpress.org/support/users/khaled/) * (@khaled) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/) * Quick one, does anyone know of any article/tutorial that solves this problem: * Basically trying to have the background of a div have an opacity of say 75% while the text and the rest of the content within said div (that includes images as backgrounds within other divs) to not have the opacity applied to them. Any ideas? Viewing 9 replies - 1 through 9 (of 9 total) * [vrada](https://wordpress.org/support/users/vrada/) * (@vrada) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236053) * No, but if you check the following areas, you might find it: [http://www.stylegala.com/resources/](http://www.stylegala.com/resources/) [http://www.cssbeauty.com/links/](http://www.cssbeauty.com/links/) * hope it helps a lit * [masquerade](https://wordpress.org/support/users/masquerade/) * (@masquerade) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236056) * 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](https://wordpress.org/support/users/khaled/) * (@khaled) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236057) * 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… * [ifelse](https://wordpress.org/support/users/ifelse/) * (@ifelse) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236063) * Khaled, * The [following link](http://www.mandarindesign.com/opacity.html) 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. * [nmallory](https://wordpress.org/support/users/nmallory/) * (@nmallory) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236064) * I never could get this to work “right”. * Thread Starter [khaled](https://wordpress.org/support/users/khaled/) * (@khaled) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236066) * 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:
[](http://www.emmortel.com)
* 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](https://wordpress.org/support/users/khaled/) * (@khaled) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236067) * 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](http://www.ozoneasylum.com/23679) * > 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. * [ifelse](https://wordpress.org/support/users/ifelse/) * (@ifelse) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236069) * Looks like it’s not really feasible in a practical way then… Thanks Khaled for the info. * [masquerade](https://wordpress.org/support/users/masquerade/) * (@masquerade) * [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236072) * 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. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘CSS Opacity’ is closed to new replies. ## Tags * [ife_tag](https://wordpress.org/support/topic-tag/ife_tag/) * 9 replies * 5 participants * Last reply from: [masquerade](https://wordpress.org/support/users/masquerade/) * Last activity: [20 years, 10 months ago](https://wordpress.org/support/topic/css-opacity/#post-236072) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics