【发布时间】：2018-07-07 18:44:45
【问题描述】：
在开始之前，我了解线性渐变无法通过 CSS 中的传统过渡进行过渡。我知道渐变被视为图像。这是我的问题。我的网站上有一个导航栏。我正在使用物化 css 作为我的框架。当用户访问我的网站时，导航栏是透明的白色，当用户滚动时，我希望我的导航栏在某个点过渡到线性渐变。这可能吗？这是我的标记：
$(document).ready(function(){
$('.sidenav').sidenav();
const parallax = () => {
let wScroll = $(window).scrollTop();
if (wScroll > 400) {
$("nav").addClass("bgchange");
} else {
$("nav").removeClass("bgchange");
}
};
parallax();
$(window).scroll(function() {
parallax();
});
});.navlogo {
position: relative;
height: 55px !important;
width: 55px !important;
margin-top: 10px;
}
.bgchange {
z-index: 10;
background: linear-gradient(to right, #00BAA3, #1565c0) !important;
}
.navbar-fixed {position: absolute; z-index:10;}
.trans{
background-color: rgba(255,255,255,0.25) !important;
transition: all 0.7s ease-in-out;
}
input {
outline-style:none;
box-shadow:none;
border-color:transparent;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px white inset !important;
}
.sidenav .user-view .background img {
width: 100%;
height: 100%;
position: relative;
}
.sidenav .user-view {
height: 240px;
background-color: rgba(0, 0, 0, 0.5);
}
.name {
display: inline-block;
line-height: 15px;
}
.sale {
text-transform: uppercase;
font-weight: 900;
margin: 0 0 1rem;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
.brand-logo .text {
display: inline-block;
position: absolute;
margin-top: 18px;
margin-left: 5px;
text-transform: uppercase;
font-weight: 900;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<div class="navbar-fixed">
<nav class='trans'>
<div class="nav-wrapper">
<a href="#!" class="brand-logo "><img class='navlogo' src="static/images/IMG_6970.png" alt=""><span class="text">Dog<span>House</span></span></a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href='login.html' class="waves-effect waves-light btn indigo darken-4 btnnav">Login</a></li>
<li><a href='login.html' class="waves-effect waves-light btn indigo darken-4 btnnav">Sign up</a></li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav " id="mobile-demo">
<li><div class="user-view">
<div class="background">
<img src="static/images/IMG_6971.png">
</div>
<div class="center center-align">
<a href="#sell"><span class="white-text sale">DogHouse</span></a>
<a href="#name"><span class="white-text name">The only app you will need for when you are on your dream vacation.</span></a>
<a href="#email"><span class="white-text email"><br>doghouse@gmail.com</span></a>
</div>
</div></li>
<li><a href="login.html"><i class="material-icons">supervisor_account</i> Login</a></li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>【问题讨论】：
标签： html css navbar gradient materialize