Question

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

我已将其添加为伪:: after元素，但我不知道为什么它不起作用。我认为这可能是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

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

Answer 2

您没有正确指定背景属性，我的意思是正确的线性渐变属性。

导航中的线性梯度未显示

2 个答案: