300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 如何用 js 实现 css 透明渐变效果 如:百度首页随心听的歌词效果

如何用 js 实现 css 透明渐变效果 如:百度首页随心听的歌词效果

时间:2023-11-02 06:00:10

相关推荐

如何用 js 实现 css 透明渐变效果 如:百度首页随心听的歌词效果

你可以用png透明做一个渐变的透明然后用css相对定位到和z-index属性调整div层设置div的背景。

.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_04640cde.png) 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_04640cde.png) no-repeat left bottom;}

这里是一行歌词

这里是一行歌词

这里是一行歌词

至于lrc_cover_big_04640cde.png这张你可以自己做,也可以到百度首页随心听的资源中找到,下载就可以。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。