Question

我正在试图弄清楚如何更改引导导航栏的背景颜色以匹配元素的背景，在这种情况下是身体标记。我想要的效果类似于'background-color：transparent'，但我不希望它透明;当你向下滚动时，我希望页面仍然在它后面流动。我也不希望它继承父背景，因为它是线性渐变。我要做的是将整个导航栏的背景设置为其后面的父元素导航栏后面的当前颜色。
由于这个问题并不清楚，我在jsfiddle中设置了一个例子：https://jsfiddle.net/y1Lev5o6/2/

使用bootstrap资源，这里是小提琴上的html

<body style="background-image:-webkit-linear-gradient(top,#023322,#ffffff); background-repeat:no-repeat; height:1000px;">
<div class="navbar navbar-inverse navbar-fixed-top" style="background-image:none; background-color:transparent;">
    <div class=" container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav" style="color:white;">
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>

    </div>
</div>
</div>
<div class="container body-content">
    <div style="background-color: white; height: 100px;margin-top:200px;">
        I don't want to see white in my nav bar</div>
    <footer style="padding-top:200px;">
        <p style="color:white;">&copy; my website</p>
    </footer>
</div>

如果你向下滚动小提琴的结果，我认为很明显我想要完成什么，或者在这种情况下防止。我希望我的所有页面元素都在我的导航栏后面，但是希望导航栏在body标签上直接拾取它背后的颜色。

bootstrap navbar继承父级的渐变颜色

0 个答案: