Fill opacity of SVG object nested in transparent div

Question

I have a div that has the opacity set to 0.6 to make it a little transparent. Nested in this div, I'm adding lines and shapes using SVG that I want to be opaque. The fiddle shows a simple example:

JSFiddle:

The green circle in the div with the red background is inheriting the opacity of the div with the red background. The green circle below the red div shows it without any transparency - which is how I want to look on the red background.

<div style="width: 160px;height: 140px;background-color: red;opacity: 0.6;">
  <svg width="160" height="140">
    <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
  </svg>
</div>
<svg width="160" height="140">
  <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
</svg>

How can I make the green circle nested in the red div opaque?

Answer 1

The 0.6 opacity applies to the whole of the div (including it's contents). There is no way for a child element to override the opacity of it's parent.

Your only choice is to move the red background into the SVG.

<div style="width: 160px;height: 140px;">
  <svg width="160" height="140">
      <rect width="100%" height="100%" fill="red" opacity="0.6"/>
    <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
  </svg>
</div>
<svg width="160" height="140">
  <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
</svg>

Demo here

Answer 2

You should use rgba(255,0,0,0.6) colors instead to set only background opacity.

The behavior you experiment is normal, opacity applies all the way through the element , childs & text included .

http://jsfiddle.net/vLV5h/7/