Opacity CSS on inside element?

Question

On main wrapper element i have some opacity, but i can not clear that style on inner element?

This is example

<div class="wrapper">

<div class="inner">

</div>
</div>

Here is CSS

 .wrapper{
    width:400px;
    height:500px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";       /* IE 8 */
    filter: alpha(opacity=60);  /* IE 5-7 */
    -moz-opacity: 0.6;          /* Netscape */
    -khtml-opacity: 0.6;        /* Safari 1.x */
    opacity: 0.6;
    background-color:red;
    }

 .inner{
    width:200px;
    height:300px;
    background-color:blue;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";       /* IE 8 */
    filter: alpha(opacity=100);  /* IE 5-7 */
    -moz-opacity: 1.0;          /* Netscape */
    -khtml-opacity: 1.0;        /* Safari 1.x */
    opacity: 1.0;
    }

Even important does not help? Here is working fiddle http://jsfiddle.net/Pq4LS/

.inner opacity is beinged applied correctly ..what is your issue here ! — Dimag Kharab, Apr 14 '14 at 06:49
I answered the same question few minutes back here http://stackoverflow.com/questions/23053115/prevent-text-from-getting-opaque-when-using-opacity-property/23053143#23053143 — Mr. Alien, Apr 14 '14 at 06:50
@Mr.Alien I think it's more that they have the same answer, but they're still different questions to me — Ming, Apr 14 '14 at 06:53

score 5 · Accepted Answer · answered Apr 14 '14 at 06:49

You cannot force a child to have a higher opacity than its parent.

In this instance, you could set a partially-transparent background-color or background-image to suit.

http://jsfiddle.net/Pq4LS/2/

 .wrapper{
    width:400px;
    height:500px;
    background-color: rgb(255, 0, 0); /* Oops, don't forget to set a fallback colour for older browsers */
    background-color: rgba(255, 0, 0, 0.6);
    }

 .inner{
    width:200px;
    height:300px;
    background-color:blue;
    }

score 0 · Answer 2 · answered Apr 14 '14 at 06:54

what it mean like clear? pls improve you question

i have changed the opacity its working

 .wrapper{
    width:400px;
    height:500px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
    filter: alpha(opacity=100);  /* IE 5-7 */
    -moz-opacity: 1;          /* Netscape */
    -khtml-opacity: 1;        /* Safari 1.x */
    opacity: 1;
    background-color:red;
    }

 .inner{
    width:200px;
    height:300px;
    background-color:blue;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";       /* IE 8 */
    filter: alpha(opacity=60);  /* IE 5-7 */
    -moz-opacity: 0.6;          /* Netscape */
    -khtml-opacity: 0.6;        /* Safari 1.x */
    opacity: 0.6;
    }

Opacity CSS on inside element?

2 Answers2