Question

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

.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中，所有渐变都发生在背景属性中。这意味着只有背景会褪色，而不是文本等实际内容。这就是为什么在上一个答案中，更改为蓝色显示渐变，背景从白色渐变为蓝色，在您的情况下，背景为白色并淡化为白色，无效。

如果你想淡化文本本身，你想要做的事情实际上只有一个我知道的选项，那就是创建一个渐变为白色的叠加层，这是一个例子：{{3 }}

基本上你在上添加另一个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下面，但是我不相信有任何其他方法可以获得你想要的东西。

Answer 2

因为渐变是从白色到白色，背景是白色的......一切都是白色的......你永远不会看到背景渐变色。这是带蓝色渐变的代码：

background: -moz-linear-gradient(left, rgba(255,0,0,0) 72%, rgba(0,0,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(72%,rgba(255,0,0,0)), color-stop(100%,rgba(0,0,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,0,0,0) 72%,rgba(0,0,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,0,0,0) 72%,rgba(0,0,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,0,0,0) 72%,rgba(0,0,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,0,0,0) 72%,rgba(0,0,255,1) 100%); /* W3C */

http://jsfiddle.net/yykv5mLz/1/

淡出div的右侧

2 个答案: