Set Opacity of Background Image Without Affecting Child Elements

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>

    Background image opacity without affecting text

    Follow this link How can i change background image opacity without changing on div content?

    .content {  position: relative;}
    .content::after { content: ""; background: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') left top no-repeat, url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') right bottom no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
    <div class="content">        <div class="box">            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>        </div></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

    Apply opacity without effecting the child elements

    The opacity will affect all children of an element. You can achieve what you want by using two parallel divs, one for the background image with opacity and the other with the span and the rest of the content. The absolute positioning of bg-img will not affect the position of content and will appear behind this. You also want to adjust the positioning and size of bg-img using top, bottom, right, left, width or height

    HTML:

    <div>
    <div class="bg-img"></div>
    <div class="content">
    <span>text</span>
    </div>
    </div>

    CSS:

    .bg-img {
    position: absolute;
    }
    .bg-img:hover {
    opacity: 0.7;
    }

    Background Opacity without breaking content to divs

    Use pseudo elements:

    http://jsfiddle.net/2dauqf9o/6/

    section {
    position: relative;
    text-align: center;
    padding: 120px 0;

    &:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    content: '';
    transition: all .15s ease-in-out;
    }
    }

    h2 {
    position: relative;
    z-index: 1;
    }


    // Hover
    section:hover {

    &:after {
    opacity: .6;
    }
    }

    How to change only the background image opacity?

    You could also do this by a pseudo element. Something like this:

    section {
    position: relative;
    padding: 15px;
    width: 100%;
    height: 700px;
    }

    section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .5;
    background-image: url(../IMG/Photo_NR1.jpg);
    }

    So you do not need an image tag and you separating the design from content.



    Related Topics



    Leave a reply



    Submit