CSS 半透明层的实现，文字层半透明显示图片

发布时间：2018-11-30 14:26:13 所属栏目：活动来源：站长网

导读：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>
提示：可修改后代码再运行!

（编辑：晋江门户网）

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