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

　　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"> 360安全卫士，你声称让电脑跑的最快，可你现在是不是太霸道了？打开什么你都要蹦个提示框，关掉你还要浪费我时间，你烦人不？？少了你电脑就不运行了？ 国人就这点素质，新闻早说了中国不会受核辐射，而且吃碘也对抗辐射起不到什么作用？日本人还没抢盐，国人的忧患意识实在让人佩服！ </div> </div> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

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

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性