Detailed explanation of the solution for CSS-opacity child elements to inherit the transparency of parent elements

In the process of writing the project page, I encountered the problem of child elements inheriting the transparency of parent elements. I searched a lot of documents and they all gave the first method. This method mainly solves simple scenes, but it is no longer applicable when setting a complex background.

Analysis of the reasons:

If the background color of the parent element is set to opacity: 0.5, the child element will inherit it. If opacity: 1 is set for the child element, the transparency of the child element is also set based on the parent element's 0.5.

First method:

When setting the transparency of the parent element background color, avoid using background: #000; opacity: 0.5. It is recommended to use background: rgba(0,0,0,0.5)

Second method:

If the background color is set to a complex background such as a gradient color, the first method is no longer applicable.

background-image: linear-gradient(-180deg, rgba(20,20,20,0.00) 19%, #303030 100%);
opacity: 0.5;

Because child elements inherit the opacity property of their parent elements, we make it not a child element. Add a child element, absolutely position it to the parent element, and then set the background color and transparency on the element.

<div class="container">
    <div class="content">
        <p>I am a DIV with class content</p>
        <p>My background is the background of class background</p>
        <p>Through relative positioning and absolute positioning, I moved the DIV with class background to my position. </p>
        <p>At the same time, my larger z-index makes it float on top of it. :)</p>
    </div>
    <div class="background"></div>
</div>

.container {
    width: 300px;
    height: 250px;
    color: #fff;
    position:relative;
}
.content {
    position:relative;
    z-index:5;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.background {
    background-color: #37a7d7;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    /*Compatible with IE7, 8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}

Reference: https://www.cnblogs.com/liu-l/p/3890861.html

This concludes this article on the solution to how CSS-opacity child elements inherit the transparency of parent elements. For more information about CSS-opacity child elements inheriting the transparency of parent elements, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that you will support 123WORDPRESS.COM in the future!