求CSS图片渐变效果实现方法(有图)（需要处理一批该图片，左边为原图，右边为目标样图）

在上面盖个层，写个线性渐变

mask{
  height:100%;
  background: -webkit-linear-gradient(transparent, #fff);
  background: -o-linear-gradient(transparent, #fff);
  background: -moz-linear-gradient(transparent, #fff);
  background: linear-gradient(transparent, #fff);
}

渐变的更多用法可以直接搜css linear-gradient

你的js能让从初始状态变到不透明，那说明filter:alpha(opacity)的opacity你用js控制到100了。并且在到100以后你的js就停止运算了。检查js逻辑，让opacity变化到100后开始减小。
目前情况肯定是到100后没有执行opacity减小的代码。

说明一下，
背景是调整不了透明度的，你只能调整容器的透明度来实现容器内的背景，内容也出现透明度。
<style>
#box{
width:200px;
height:200px;
background:url(背景路径);
opacity:05;
filter:"alpha(opacity=50)";
-ms-filter:"alpha(opacity=50)"; / 旧版IE /
}
</style>
<div id=box></div>

50和05是透明度，按自己需要修改吧。\x0d\css代码：\x0d\box{ width:100px; height:100px; background-color:#000; filter:alpha(Opacity=50); opacity: 05; }\x0d\html代码：\x0d\透明区域回答于 2022-12-14

样式 直接opacity：05
filter:alpha(opacity=50):这个是为IE6设的，可取值在0-100，其它三个0到1
-moz-opacity:05; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 05; 这个为了支持一些老版本的Safari浏览器。
opacity: 05; 这是最重要的，因为它是CSS标准该属性支持firefox, Safari和 Opera

你可以用png透明做一个渐变的透明然后用css相对定位到和z-index属性调整div层设置div的背景。
<style type="text/css">
lrcBox{position:relative; height:400px; width:400px;display:block; overflow:hidden; border:1px solid #60F; font-size:12px; }
lrcBox top{display:block;position:absolute; height:30px; width:100%;top:0px;z-index:2; background:url(lrc_cover_big_04640cdepng) no-repeat left top;}
lrcBox warp{display:block; padding:10px; background-color:#fff; height:100%;}
lrcBox body{display:bolock; width:100%; height:100%; background-color:#39F;}
lrcBox body ul,lrcBox body li{display:block; list-style:none; padding:0; margin:0; text-align:center;}
lrcBox body ul{ width:100%;}
lrcBox body li{ padding-top:3px; padding-bottom:3px;}
lrcBox bottom{display:block;position:absolute; height:30px; width:100%; bottom:0px;z-index:2; background:url(lrc_cover_big_04640cdepng) no-repeat left bottom;}
</style>
<div class="lrcBox">
<!--上边的渐变背景层-->
<div class="top"></div>
<!--歌词层-->
<div class="warp">
<div class="body">
<ul>
<li>这里是一行歌词</li>
<li>这里是一行歌词</li>
<li>这里是一行歌词</li>
</ul>
</div>
</div>
<!--下边的渐变背景层-->
<div class="bottom"></div>
</div>
至于lrc_cover_big_04640cdepng这张你可以自己做，也可以到百度首页随心听的资源中找到，下载就可以。

---