CSS div opacity only on outer div
css, html, opacity, styles
Solution
Try using `background-color: rgba(255,255,255,0.7);` with no opacity or filter that should make the background transparent but not effect the contents of the element.
Problem
I've got two divs, the outer and the inner div. I have a background image and the outer div has an opacity set however i just cannot seem to get the inner div to not inherit the opacity of outer div. i would like the inner div to be a solid colour. my code is below and a jsfiddle here: http://jsfiddle.net/3TK3U/ ``` <style type="text/css"> body { background-image:url('http://media-bubble.info/images/layout/background.png'); } .outsideBox { width:70%; height:200px; background-color: #ffffff; opacity:0.7; filter:alpha(opacity=70); text-align:center; } .insideBox { width:40%; height:80px; background-color: #999; z-index:999999; } </style> <div id="Introduction" class="outsideBox"> <div id="Introduction" class="insideBox">This is the inside box which should not inherit transparancy</div> </div> ```