Css 淡出div的右侧

有人知道为什么我不能让这个线性梯度在这个div的右边淡出吗

.main a{
显示：内联；
}
梅因先生{
高度：50px；
溢出-x：滚动；
空白：nowrap；
}
.推子{
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#ffffff+72，ffffff+100和0+72,1+100*/
背景：-莫兹线性梯度（左，rgba（255，255，255，0）72%，rgba（255，255，255，1）100%）；
/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（72%，rgba（255、255、255、0））、颜色停止（100%，rgba（255、255、255、1））；
/*铬，Safari4+*/
背景：-webkit线性梯度（左侧，rgba（255，255，255，0）72%，rgba（255，255，255，1）100%）；
/*铬10+，Safari5.1+*/
背景：-o-线性梯度（左，rgba（255，255，255，0）72%，rgba（255，255，255，1）100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（左侧，rgba（255，255，255，0）72%，rgba（255，255，255，1）100%）；
/*IE10+*/
背景：线性梯度（向右，rgba（255，255，255，0）72%，rgba（255，255，255，1）100%）；
/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00ffffff'，endColorstr='#ffffff'，GradientType=1）；
/*IE6-9*/
复制
}

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

因为渐变从白色变为白色，背景是白色。。。一切都是白色的。。。您将永远看不到背景渐变色。下面是带有蓝色渐变的代码：

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 */

---

因为渐变是从白色变为白色，背景是白色的。。。一切都是白色的。。。您将永远看不到背景渐变色。下面是带有蓝色渐变的代码：

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 */

---

我认为您混淆了淡入div背景和淡入文本，这可能会让人困惑，但不一样。请注意，在css中，所有渐变都发生在背景属性中。这意味着只有背景会褪色，而不是像文本那样的实际内容。这就是为什么在前面的答案中，变为蓝色会显示渐变，背景会从白色变为蓝色，在您的例子中，背景是白色并变为白色，不会产生任何效果

如果您想淡入文本本身，对于您想做的事情，我只知道一个选项，那就是创建淡入白色的覆盖，下面是一个示例：

基本上，您可以在已经创建的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下面，但是我不相信有任何其他方法可以获得您想要的内容。

我认为您将淡入div背景与淡入文本混淆，这可能会让人困惑，无法以相同的方式工作。请注意，在css中，所有渐变都发生在背景属性中。这意味着只有背景会褪色，而不是像文本那样的实际内容。这就是为什么在前面的答案中，变为蓝色会显示渐变，背景会从白色变为蓝色，在您的例子中，背景是白色并变为白色，不会产生任何效果

如果您想淡入文本本身，对于您想做的事情，我只知道一个选项，那就是创建淡入白色的覆盖，下面是一个示例：

基本上，您可以在已经创建的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之下，但是我不相信有任何其他方法可以获得您想要的内容