bootstrap navbar inherit a gradient color of parent

问题

I'm trying to figure out how to change the background color of a bootstrap nav bar to match the background of the element, in this case the body tag, behind it. The effect I am wanting is similar to 'background-color:transparent' but I don't want it transparent; I want the page to flow behind it still as you scroll down. I also do not want it to inherit the parent background as it is a linear-gradient. What I am looking to do is set the background of the whole nav bar as the current color behind the nav bar on the parent element behind it.
Since that didn't come out very clear, I set up an example in jsfiddle: https://jsfiddle.net/y1Lev5o6/2/

Using bootstrap resources, here is the html on the fiddle

<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>

If you scroll down on the results of the fiddle I think it is obvious of what I am trying to accomplish, or in this case prevent. I want all my page elements to flow behind my nav bar, but want the nav bar to pick up the color directly behind it on the body tag.

回答1:

With the help of a little javascript:

$(document).ready(function(){
    $(window).scroll(function(e){
        var scr = $(window).scrollTop();
        $('.navbar').css('background-position', '0px -'+ scr+'px');
    });    
});

and CSS:

.navbar{
    background-image:-webkit-linear-gradient(top,#023322,#ffffff); 
    background-repeat:no-repeat;
    background-position:top;
    background-size:auto 1000px;
}

See this updated fiddle

Essentially what's going on here is the .navbar gets the same gradient backgorund, and it's position is changed/moved with the window scrolling.

来源：https://stackoverflow.com/questions/29975246/bootstrap-navbar-inherit-a-gradient-color-of-parent

标签

css

twitter-bootstrap