javascript - 如何阻止 child 继承 parent 的不透明度

Question

我很难弄清楚如何阻止子元素继承父元素的不透明度。

我知道之前已经回答过这个问题，设置背景而不是不透明度值。但是我的场景有所不同，因为我必须在包含子元素的粘性 header 中使用淡入淡出效果。

当我添加淡入时， children 也会得到同样的效果。

这是一些测试代码:

$('.nav-items').css('opacity', '0.3');

var top_nav = $("body, html").scrollTop();

(function () {
    var $win = $(window);

    $win.on('scroll', function () {

        var header = $(".nav-items");
        if ($(this).scrollTop() > 40) {
            if (!header.data('faded')) header.data('faded', 1).not('nav-item li').stop(true).fadeTo(400, 1);
        } else if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(400, 0.3);
        }
    });
}).call(this);

body {
    margin:0;
    padding:0;
}
.nav-items {
    font-weight: 900;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.nav-items ul {
    max-width: 960px;
    margin: 0;
    padding: 0;
    margin: 0 auto;
}
.nav-items ul li {
    cursor: pointer;
    margin: 0;
    padding: 20px 45px;
    width: 19%;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    color: #fff;
    vertical-align: top;
    text-transform: uppercase;
}
.nav-items ul li.bigger {
    cursor: default;
    text-transform: lowercase;
    width: 20%;
    padding: 0;
    height: inherit;
    position: relative;
    top: 15px;
    /* vertical-align: bottom; */
}
.nav-items ul li.bigger img {
    height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="nav-items">
    <ul>
        <li id="l_1">How it Works</li>
        <li id="l_2">How to be a driver</li>
        <li id="l_3">The Community</li>
        <li id="l_4">Contact Us</li>
    </ul>
</div>
<div>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem</div>

Answer 1

您无法阻止图层继承不透明度。唯一的解决方法是设置 rgb 背景颜色。如果子元素也继承了它，您可以使用 css 简单地覆盖它。

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";