Javascript 如何跳投淡出

您能告诉我如何使用css或JavaScript使文本或任何div的左侧淡出效果吗？ 效果如下所示：

在html中：

<div class="buttonBackground">
  <div class="divToFadeOut">asdasdasdasdasdasdasd</div>
</div>

asdasdasdasdasdasdasd

您根本不需要任何javascript。看起来，如果你用文本指定一个div（并给它一个宽度，溢出隐藏），用按钮的背景图像，然后指定另一个在文本上分层的图像，当你从左向右移动时，不透明度从0移动到1，你会得到这个效果

如果您想要淡出div中的字母，那么您需要创建一个大约20-30px宽的png-32，然后应用一些CSS将其修复到右侧。我来了

<style type="text/css">
  .buttonBackground { 
     position: relative;
     padding: 15px; /* approximate */ 
  }
  .divToFadeOut img { 
     position: absolute; 
     right: 0; 
     top: 0; 
     z-index : 10;  
  }
</style>


<div class="buttonBackground">
  <div class="divToFadeOut">
    asdasdasdasdasdasdasd<img src="horiz-fade.png" alt="" />
  </div>
</div>

.按钮背景{
位置：相对位置；
填充：15px；/*近似值*/
}
.divToFadeOut img{
位置：绝对位置；
右：0；
排名：0；
z指数：10；
}
asdasdasdasdasdasdasd

---

在您选择的图像编辑器中，对宽30像素、高约100像素（不太重要）的图像应用渐变。它的左侧是透明的，与右侧的背景相匹配。那会有点棘手。。。因为这也是一个垂直梯度。

它可以在不更改HTML的情况下实现

<div class="divToFadeOut">abcdefghijklmnopqrstuvwxyz</div>

---

是的，我也这么想，但我想做普遍的效果。所以，如果我匹配右边的背景，它将是这个背景的唯一解决方案。这是真的。您也可以在叠加背景中进行alpha透明，但仍需要指定纯色。更普遍的是，你不需要创建新的图像，但是你仍然需要一个纯色。我不确定是否有一种“CSS”方法可以将文本淡出，否则。请看这里：但不幸的是，这也不是一个普遍的影响。我只想对带有文本的div执行效果，不管container div的背景如何，它都不能正常工作。它还使容器div（.buttonBackground）具有与.divToFadeOuttry相同的图像背景，添加以下css

.buttonBackground{overflow:hidden；}

.divToFadeOut { 
   background-color: #CCC; 
   height: 50px; 
   width: 350px; 
   font-size: 36px; 
   line-height: 50px; 
   padding-top: 0px; 
   padding-right: 10px; 
   padding-bottom: 0px; 
   padding-left: 10px; 
   position:relative; /* important */
   overflow:hidden;  /* important */
}
.divToFadeOut:after { 
   content:".";
   text-indent:9999px; 
   position:absolute; 
   top:0px; 
   right:0px; 
   width:350px; 
   height:50px; 
   background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); 
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); 
   background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
   background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   z-index:9999; 
}