如何淡出淡出

Question

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

在html中：

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

Answer 1

如果你想淡出div中的字母，那么你想要创建一个大约20-30px宽的png-32然后应用一些CSS来修复它。 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>

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

Answer 2

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

Answer 3

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

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

应用以下css：

.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; 
}