div 右侧淡出

Question

有人知道为什么我不能让这个线性渐变淡出这个 div 的右侧吗？

• http://jsfiddle.net/yykv5mLz/
• http://colorzilla.com/gradient-editor/#ffffff+72,ffffff+100&0+72,1+100

.main a {
  display: inline;
}
.main {
  height: 50px;
  overflow-x: scroll;
  white-space: nowrap;
}
.fader {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+72,ffffff+100&0+72,1+100 */
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(72%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
  copy
}

<div class="main">
  <div class="fader">
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
    <a>Test</a>
  </div>
</div>

Answer 1

我相信您混淆了淡化 div 背景和淡化文本，这可能会令人困惑，但它们的工作方式并不相同。请注意，在您的 css 中，所有渐变都发生在背景属性中。这意味着只有背景会褪色，而不是文本等实际内容。这就是为什么在前面的答案中更改为蓝色会显示渐变，背景从白色渐变为蓝色，在您的情况下，背景是白色并渐变为白色，不会产生任何效果。

如果你想淡出文本本身，对于你想要做的事情，我知道实际上只有一个选择，那就是创建一个淡入白色的覆盖层，这里有一个例子：JSFiddle

基本上，您在已经创建的 div之上添加另一个 div ，它使用以下 css 创建渐变效果：

.fade {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 30%,rgba(255,255,255,1) 100%);
  position: absolute;
}

这有一个潜在的缺点，即用户不再可以选择文本进行复制/粘贴，因为它位于另一个 div 下方，但我不相信有任何其他方法可以获取您想要的内容。