在上面盖个层,写个线性渐变
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
目前情况肯定是到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这张你可以自己做,也可以到百度首页随心听的资源中找到,下载就可以。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)