Specify Parent Divs Opacity But Make It Not Affect Children HTML Elements

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

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.

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>

    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>

    Disable opacity on child element when parent element has opacity

    Solved this problem by changing it to the following: 

    <div id="contentContainer" style="background: rgba(255,255,255,0.8);">
        Content ...
        <img src="..." alt="Photo" />
    </div>

    Used just rgba alpha instead of opacity.
    Now it works.

    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/

    How to make parent transparent but not the child?

    Hi I am mentioning the property through in which you can increase and decrease the opacity of parent container background and that will not affect the child container. It's simple see the css basically you have to use the rgba here rgb for color in background & a-alpha for opacity.

    CSS

    background:rgba(0,0,0,0.1);

    DEMO


    Related Topics

    Find Selected Item in Datalist in HTML

    Jquery CSS Visibility with Animation

    Highcharts: Make the Legend Symbol a Square or Rectangle

    Putting JavaScript into CSS

    Display a Message Within the Kendo Grid When It's Empty

    Adding to Script Bundle from Partial View in .Net MVC 5

    Jquery + Animate.CSS Animation Only Working Once, Animation Not Resetting

    How to Prevent Fixed Button from Overlapping Footer Area and Stop the Button on Top of Where the Footer Is Located

    Implementing Flipcard on Click Instead of on Hover

    Import JavaScript Files with CSS

    Center Flex Item in Container, When Surrounded by Other Flex Items

    How to Set a JavaScript Onclick Event to a Class with CSS

    Use JavaScript to Click on a Pseudo-Element

    How to Get All Valid Keywords for CSS Property

    How to Add Line Numbers to All Lines in Google Prettify

    Customize Zoom In/Out Button in Leaflet.Js

    How to Get the Grid Coordinates of an Element Using JavaScript

    Get 3D CSS Rotation Value from Matrix3D() with JavaScript


Leave a reply



Submit