html - 导航中的线性渐变不显示

Question

我创建了一个带有隐藏水平滚动条的导航，如下面的代码片段所示。我希望在导航栏的末尾添加一个从透明到白色的线性渐变，以显示有更多链接可供查看。

我已经将它添加为一个伪::after 元素，但我不知道为什么它不起作用。我认为这可能是一个 z-index 的东西，但那没有用。

有人对原因有更好的了解吗？

谢谢

.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

首先，我认为您不能那样使用 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 库实现的选项。