Question

我无法弄清楚如何阻止子元素继承父不透明度。

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

当我添加淡入淡出时，孩子也会获得同样的效果。

以下是一些测试代码：

$('.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)";

Answer 2

假设当窗口位于窗口顶部时，您希望在菜单上显示叠加效果;只需在菜单中添加单独的叠加元素并将效果添加到其中 - 而不是将其定位到其父元素

<div id="overlay"></div>

#overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background:black;
    z-index:-1;
    opacity:0.3;
}

<强> http://jsfiddle.net/10bo1me5/3/

更新了代码

var top_nav = $("body, html").scrollTop();

(function () {
    var $win = $(window);

    $win.on('scroll', function () {

        var header = $("#overlay");
        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);

#overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background:black;
    z-index:-1;
    opacity:0.3;
}
.nav-items {
    font-family: Roboto;
    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/2.1.1/jquery.min.js"></script>
<div class="nav-items">
    <div id="overlay"></div>
    <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 IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 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 Ipsum</div>

如何阻止子进程继承父不透明度

2 个答案:

更新了代码