导航中的线性梯度没有显示。

Question

我已经创建了一个带有隐藏的水平滚动条的导航，如下面的代码片段所示。我希望增加一个线性梯度结束肚脐从透明到白色，以显示有更多的链接看。

我把它作为一个伪：：后面的元素添加进来，但是我不知道为什么它不能工作。我以为这可能是个z指数的问题，但那不管用。

有谁更清楚为什么吗？

谢谢

​

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 50px;
  overflow-y: hidden;
  border: 1px solid red;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
}

.nav-scroller .nav::after {
  content: "";
  display: block;
  height: 50px;
  width: 60px;
  background: linear-gradient(90deg, rgba(white, 0), rgba(white, 1));
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid green;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="nav-scroller py-1 mb-2">
    <nav class="nav d-flex justify-content-between">
      <a class="p-2 text-muted" href="#">World</a>
      <a class="p-2 text-muted" href="#">U.S.</a>
      <a class="p-2 text-muted" href="#">Technology</a>
      <a class="p-2 text-muted" href="#">Design</a>
      <a class="p-2 text-muted" href="#">Culture</a>
      <a class="p-2 text-muted" href="#">Business</a>
      <a class="p-2 text-muted" href="#">Politics</a>
      <a class="p-2 text-muted" href="#">Opinion</a>
      <a class="p-2 text-muted" href="#">Science</a>
      <a class="p-2 text-muted" href="#">Health</a>
      <a class="p-2 text-muted" href="#">Style</a>
      <a class="p-2 text-muted" href="#">Travel</a>
    </nav>
    <div class="next"><span class="">></span></div>
    <div class="prev"><span class=""></span></div>
  </div>

  <div class="jumbotron-fluid jumbotron">
    <div class="col-lg-10 text-center">
      <div class="lead">
        <h1>Horizontal Navigation Scroller</h1>
        <small>Simple and elegant solution with CSS</small>
      </div>
    </div>
  </div>
</div>

​

Answer 1

您没有正确地指定背景属性，我指的是正确的线性梯度属性。

Answer 2

首先，我认为你不能那样使用rgba()。你需要做的事情是：

rgba(255, 255, 255, 0)    rgba(255, 255, 255, 1)

其次，当我更仔细地研究您的问题时，我首先想到的是，您想要的东西可以通过carousel来实现。您在这里所做的事情将很复杂，因为，例如，我不知道您将如何连接prev和next导航按钮，使其左右滚动。

相反，我尝试使用一个名为OwlCarousel：https://owlcarousel2.github.io/OwlCarousel2/的插件来实现您想要的

jsfiddle: http://jsfiddle.net/aq9Laaew/126019/

这可能不是您想要的，但我只想给您提供另一个由javascript库实现的选项。