CSS 半透明层的实现，笔墨层半透明昭示图片

发布时间：2018-08-20 15:27:24 所属栏目：活动来源：站长网

导读：CSS 半透明层的实现，笔墨层半透明昭示图片。让您把握filter中alpha的用法，在本示例中，最低层的是一张图片，上边是一个透明度被界说为60%的Div层，层内是笔墨，由于是不是100%透明，因此可以看到基层的图片，形创立体结果。演示： !DOCTYPE html PUBLIC

　　CSS 半透明层的实现，笔墨层半透明昭示图片。让您把握filter中alpha的用法，在本示例中，最低层的是一张图片，上边是一个透明度被界说为60%的Div层，层内是笔墨，由于是不是100%透明，因此可以看到基层的图片，形创立体结果。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Translucency</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <style> #container { position: absolute; top: 20px; left: 20px; width: 400px; height: 300px; background: url(/uploads/allimg/1103/limes.jpg) no-repeat; } #container .textblock { filter: alpha(opacity=60); opacity: 0.6; margin-top: 50px; margin-left: 50px; width: 280px; background: #ffffff; border: 1px solid #007101; padding: 0.5em; font: 80%/1.6 Arial, Helvetica, sans-serif; } </style> </head> <body> <div id="container"> <div class="textblock"> <p><b>360安详卫士</b>，你声称让电脑跑的最快，可你此刻是不是太犷悍了？打开什么你都要蹦个提醒框，关掉你还要挥霍我时刻，你烦人不？？少了你电脑就不运行了？</p> <p>国人就这点素质，消息早说了中国不会受核辐射，并且吃碘也反抗辐射起不到什么浸染？日本人还没抢盐，国人的忧患意识其实让人服气！</p> </div> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!