html - 从 RGBA 背景过渡线性渐变背景

Question

开始之前，我了解到线性渐变不能通过 CSS 中的传统过渡进行过渡。我知道渐变被视为图像。这是我的问题。我的网站上有一个导航栏。我正在使用 materialize 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>

Answer 1

我建议您在导航中创建一个伪元素，而不是尝试对背景渐变进行动画处理，使用 0 的 z-index 绝对定位。然后只需转换伪元素的不透明度即可。

下面是更新后的代码，值得注意的是我只更改了 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;
  /* this is now being applied to the pseudo element */
  /* 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;
  /* this is now being applied to the pseudo element */
  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;
}


/* pseudo element */

.trans::before {
  background: linear-gradient(to right, #00baa3, #1565c0);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.7s ease-in-out;
  z-index: 0;
}

.trans.bgchange::before {
  opacity: 1;
}

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

CodePen 示例:https://codepen.io/samwalker/pen/KeOXBa