How to Set Opacity in Parent Div and Not Affect in Child Div

How to set opacity in parent div and not affect in child div?

May be it's good if you define your background-image in the :after pseudo class. Write like this:

.parent{
width:300px;
height:300px;
position:relative;
border:1px solid red;
}
.parent:after{
content:'';
background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
opacity:0.5;
}
.child{
background:yellow;
position:relative;
z-index:1;
}

Check this fiddle

Child element inheriting parent's opacity

Use the rgba() color method instead of opacity:

div.background {  background: url(klematis.jpg) repeat;  border: 2px solid black;}div.transbox {  margin: 30px;  background-color: rgba(255, 255, 255, 0.6);  border: 1px solid black;}div.transbox p {  margin: 5%;  font-weight: bold;  color: #000000;}
<div class="background">  <div class="transbox">    <p>This is some text that is placed in the transparent box.</p>    <input type="button" value="Ok">  </div></div>

How to apply an opacity without affecting a child element with html/css?

As far as I know you can't do it in a simple way. There a couple of options here:

  1. Use absolute positioning to position box "inside" the container.

    #container {
    opacity: 0.3;
    background-color: #777788;
    position: absolute;
    top: 100px;
    left: 100px;
    height: 150px;
    width: 300px;
    }
    #box {
    opacity: 1;
    background-color: #ffffff;
    position: absolute;
    top: 110px;
    left: 110px;
    height: 130px;
    width: 270px;
    }
    <div id="container"></div>
    <div id="box">
    <p>Something in here</p>
    </div>

    Specify parent divs opacity but make it not affect children HTML elements

    You can't, the opacity level is relative to the parent's opacity, always. So 1.0 inside 0.3 would be 100% of 0.3, which is 0.3, and 0.5 inside 0.3 would be 50% of 0.3 which is 0.15. If you're only using opacity for the background color, you can specify the color using the RGBA method so that the red will be opaque and not the content (and thus the paragraph inside it).

    <div style="background-color: rgba(255, 0, 0, 0.3);">
    <p>abcde</p>
    </div>

    See here.

    Parent div transparent background but not affect child div transparency

    You need to use the RGBA background property on the container div. background: rgba(64, 64, 64, 0.5). 64, 64, 64 are the RGB color values. and 0.5 is the opacity value. Now parent can have it's own opacity value not affecting children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.

    Check working example at http://jsfiddle.net/Rp5BN/

    To support IE 5.5 to 8 we need to use vendor-specific CSS 'gradient filter:' So you need to add this.

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

    Where 7f represents 127, i.e. 50% opacity and 404040 is the color.

    Check working example in IE http://jsfiddle.net/Rp5BN/2/



    Related Topics



    Leave a reply



    Submit