Calculating the child's opacity when the parent has a specific opacity





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







-1















I have parent element whose opacity is 0.5 . I want child opacity to be 0.3 .



what should be the value for opacity for child element










share|improve this question





























  • @fcalderan Child is more transparent, not less opaque. :)

    – Praveen Kumar Purushothaman
    Nov 23 '18 at 17:31


















-1















I have parent element whose opacity is 0.5 . I want child opacity to be 0.3 .



what should be the value for opacity for child element










share|improve this question





























  • @fcalderan Child is more transparent, not less opaque. :)

    – Praveen Kumar Purushothaman
    Nov 23 '18 at 17:31














-1












-1








-1








I have parent element whose opacity is 0.5 . I want child opacity to be 0.3 .



what should be the value for opacity for child element










share|improve this question
















I have parent element whose opacity is 0.5 . I want child opacity to be 0.3 .



what should be the value for opacity for child element







css css3






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 23 '18 at 19:38









Temani Afif

83.9k104895




83.9k104895










asked Nov 23 '18 at 17:14









user3190467user3190467

43




43


















  • @fcalderan Child is more transparent, not less opaque. :)

    – Praveen Kumar Purushothaman
    Nov 23 '18 at 17:31



















  • @fcalderan Child is more transparent, not less opaque. :)

    – Praveen Kumar Purushothaman
    Nov 23 '18 at 17:31

















@fcalderan Child is more transparent, not less opaque. :)

– Praveen Kumar Purushothaman
Nov 23 '18 at 17:31





@fcalderan Child is more transparent, not less opaque. :)

– Praveen Kumar Purushothaman
Nov 23 '18 at 17:31












2 Answers
2






active

oldest

votes


















2














You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.



Simple math:



0.5 × x = 0.3 (this is what we want)
0.5 1
--- = -
0.3 x
0.3 / 0.5 = 0.6 = x





.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}

<div class="parent">
<div class="child">
</div>
</div>








share|improve this answer



















  • 1





    I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1

    – Temani Afif
    Nov 23 '18 at 19:37











  • @TemaniAfif Agree with you...

    – Praveen Kumar Purushothaman
    Nov 23 '18 at 20:38



















1














In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:






.parent {
opacity: var(--op, 0.5);
}

.child {
background: blue;
height: 50px;
opacity: calc(var(--oc)/var(--op, 0.5));
}

<div class="parent">
<div class="child" style="--oc:0.3">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
<div class="child" style="--oc:0.4">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>





You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).






share|improve this answer


























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450703%2fcalculating-the-childs-opacity-when-the-parent-has-a-specific-opacity%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    2














    You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.



    Simple math:



    0.5 × x = 0.3 (this is what we want)
    0.5 1
    --- = -
    0.3 x
    0.3 / 0.5 = 0.6 = x





    .parent, .child {padding: 5px;}
    .parent {background: #f00; opacity: 0.5;}
    .child {background: #f00; opacity: 0.6;}

    <div class="parent">
    <div class="child">
    </div>
    </div>








    share|improve this answer



















    • 1





      I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1

      – Temani Afif
      Nov 23 '18 at 19:37











    • @TemaniAfif Agree with you...

      – Praveen Kumar Purushothaman
      Nov 23 '18 at 20:38
















    2














    You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.



    Simple math:



    0.5 × x = 0.3 (this is what we want)
    0.5 1
    --- = -
    0.3 x
    0.3 / 0.5 = 0.6 = x





    .parent, .child {padding: 5px;}
    .parent {background: #f00; opacity: 0.5;}
    .child {background: #f00; opacity: 0.6;}

    <div class="parent">
    <div class="child">
    </div>
    </div>








    share|improve this answer



















    • 1





      I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1

      – Temani Afif
      Nov 23 '18 at 19:37











    • @TemaniAfif Agree with you...

      – Praveen Kumar Purushothaman
      Nov 23 '18 at 20:38














    2












    2








    2







    You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.



    Simple math:



    0.5 × x = 0.3 (this is what we want)
    0.5 1
    --- = -
    0.3 x
    0.3 / 0.5 = 0.6 = x





    .parent, .child {padding: 5px;}
    .parent {background: #f00; opacity: 0.5;}
    .child {background: #f00; opacity: 0.6;}

    <div class="parent">
    <div class="child">
    </div>
    </div>








    share|improve this answer













    You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.



    Simple math:



    0.5 × x = 0.3 (this is what we want)
    0.5 1
    --- = -
    0.3 x
    0.3 / 0.5 = 0.6 = x





    .parent, .child {padding: 5px;}
    .parent {background: #f00; opacity: 0.5;}
    .child {background: #f00; opacity: 0.6;}

    <div class="parent">
    <div class="child">
    </div>
    </div>








    .parent, .child {padding: 5px;}
    .parent {background: #f00; opacity: 0.5;}
    .child {background: #f00; opacity: 0.6;}

    <div class="parent">
    <div class="child">
    </div>
    </div>





    .parent, .child {padding: 5px;}
    .parent {background: #f00; opacity: 0.5;}
    .child {background: #f00; opacity: 0.6;}

    <div class="parent">
    <div class="child">
    </div>
    </div>






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 23 '18 at 17:29









    Praveen Kumar PurushothamanPraveen Kumar Purushothaman

    135k23141189




    135k23141189








    • 1





      I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1

      – Temani Afif
      Nov 23 '18 at 19:37











    • @TemaniAfif Agree with you...

      – Praveen Kumar Purushothaman
      Nov 23 '18 at 20:38














    • 1





      I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1

      – Temani Afif
      Nov 23 '18 at 19:37











    • @TemaniAfif Agree with you...

      – Praveen Kumar Purushothaman
      Nov 23 '18 at 20:38








    1




    1





    I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1

    – Temani Afif
    Nov 23 '18 at 19:37





    I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1

    – Temani Afif
    Nov 23 '18 at 19:37













    @TemaniAfif Agree with you...

    – Praveen Kumar Purushothaman
    Nov 23 '18 at 20:38





    @TemaniAfif Agree with you...

    – Praveen Kumar Purushothaman
    Nov 23 '18 at 20:38













    1














    In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:






    .parent {
    opacity: var(--op, 0.5);
    }

    .child {
    background: blue;
    height: 50px;
    opacity: calc(var(--oc)/var(--op, 0.5));
    }

    <div class="parent">
    <div class="child" style="--oc:0.3">
    </div>
    </div>
    <div style="height:50px;background:rgba(0,0,255,0.3)"></div>
    <div class="parent">
    <div class="child" style="--oc:0.4">
    </div>
    </div>
    <div style="height:50px;background:rgba(0,0,255,0.4)"></div>





    You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).






    share|improve this answer






























      1














      In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:






      .parent {
      opacity: var(--op, 0.5);
      }

      .child {
      background: blue;
      height: 50px;
      opacity: calc(var(--oc)/var(--op, 0.5));
      }

      <div class="parent">
      <div class="child" style="--oc:0.3">
      </div>
      </div>
      <div style="height:50px;background:rgba(0,0,255,0.3)"></div>
      <div class="parent">
      <div class="child" style="--oc:0.4">
      </div>
      </div>
      <div style="height:50px;background:rgba(0,0,255,0.4)"></div>





      You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).






      share|improve this answer




























        1












        1








        1







        In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:






        .parent {
        opacity: var(--op, 0.5);
        }

        .child {
        background: blue;
        height: 50px;
        opacity: calc(var(--oc)/var(--op, 0.5));
        }

        <div class="parent">
        <div class="child" style="--oc:0.3">
        </div>
        </div>
        <div style="height:50px;background:rgba(0,0,255,0.3)"></div>
        <div class="parent">
        <div class="child" style="--oc:0.4">
        </div>
        </div>
        <div style="height:50px;background:rgba(0,0,255,0.4)"></div>





        You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).






        share|improve this answer















        In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:






        .parent {
        opacity: var(--op, 0.5);
        }

        .child {
        background: blue;
        height: 50px;
        opacity: calc(var(--oc)/var(--op, 0.5));
        }

        <div class="parent">
        <div class="child" style="--oc:0.3">
        </div>
        </div>
        <div style="height:50px;background:rgba(0,0,255,0.3)"></div>
        <div class="parent">
        <div class="child" style="--oc:0.4">
        </div>
        </div>
        <div style="height:50px;background:rgba(0,0,255,0.4)"></div>





        You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).






        .parent {
        opacity: var(--op, 0.5);
        }

        .child {
        background: blue;
        height: 50px;
        opacity: calc(var(--oc)/var(--op, 0.5));
        }

        <div class="parent">
        <div class="child" style="--oc:0.3">
        </div>
        </div>
        <div style="height:50px;background:rgba(0,0,255,0.3)"></div>
        <div class="parent">
        <div class="child" style="--oc:0.4">
        </div>
        </div>
        <div style="height:50px;background:rgba(0,0,255,0.4)"></div>





        .parent {
        opacity: var(--op, 0.5);
        }

        .child {
        background: blue;
        height: 50px;
        opacity: calc(var(--oc)/var(--op, 0.5));
        }

        <div class="parent">
        <div class="child" style="--oc:0.3">
        </div>
        </div>
        <div style="height:50px;background:rgba(0,0,255,0.3)"></div>
        <div class="parent">
        <div class="child" style="--oc:0.4">
        </div>
        </div>
        <div style="height:50px;background:rgba(0,0,255,0.4)"></div>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 23 '18 at 20:42

























        answered Nov 23 '18 at 20:30









        Temani AfifTemani Afif

        83.9k104895




        83.9k104895






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450703%2fcalculating-the-childs-opacity-when-the-parent-has-a-specific-opacity%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

            Alcedinidae

            Origin of the phrase “under your belt”?