CSS div opacity only on outer div

Question

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>

possible duplicate of **[How to make the background DIV only transparent using CSS](http://stackoverflow.com/questions/7565384/how-to-make-the-background-div-only-transparent-using-css)** — dsgriffin, Nov 21 '13 at 21:03

score 29 · Answer 1 · answered Nov 21 '13 at 21:43

29

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.

answered Nov 21 '13 at 21:43

kyledavide

506
3
6

I don't know why he didn't make this as an answer but it worked for me, Thanks! – hjavaher Jan 04 '14 at 05:14
Thanks for your answer, help me too – Janatbek Orozaly Mar 17 '17 at 19:49
Would be helpful to make the answer more detailed, it's not clear which elements you're referring to. – gene b. Dec 30 '19 at 17:30
Handy Hex to RGB converter to make RGB from your desired Hex background colour https://www.webfx.com/web-design/hex-to-rgb/ - there are plenty out there but this one showed the colour full screen so you can evaluate the effect of your background overlay colour. Elegant and simple solution. – Steve Oct 21 '20 at 11:10

score 0 · Answer 2 · answered Jan 07 '22 at 17:31

This is an old question but still comes up in a search so an update to highlight that you can also set the opacity with hex colour values too (not sure when this was introduced or how far back compatibility is across browsers).

For example if you have a background colour like this:

background-color: #5D5C61;

you can set the opacity by adding two hex digits to the end:

background-color: #5D5C61F5;

The range is 00 (fully transparent) to (FF).

It avoids having to convert to RGB if you don't want to in your page or app.

.outsidebox {
  //Add your other properties as needed
  background-color: #5D5C61F5;
}

.insidebox {
  //No opactity needed here if you don't
  //want it transparent.
  //Add your other properties as needed
  background-color: #1F2833;
}

CSS div opacity only on outer div

2 Answers2