HTML&CSS基础-透明度opacity与filter
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; position: relative; z-index: 2; opacity: 0.5; filter: alpha(opacity=50); } .box2{ width: 200px; height: 200px; background-color: yellow; /*开启绝对定位*/ position: absolute; /*设置偏移量*/ top: 100px; left: 100px; /* * 如果定位元素的层级是一样，则下边的元素会盖住上边的，通过z-index属性可以用来设置元素的层级 * * 可以为z-index指定一个正整数的值，该值将会作为当前元素的层级，层级越高，越优先显示 * * 对于没有开启定位的元素不能使用z-index */ z-index: 25; opacity: 0.5; filter: alpha(opacity=50); } .box3{ width: 200px; height: 200px; background-color: yellowgreen; position: absolute; top: 200px; left: 200px; z-index: 30; /** * 设置元素的透明背景 * opacity可以用来设置元素背景的透明，它需要一个0-1之间的值: * 0: * 表示完全透明 * 1: * 表示不透明 * 0.5: * 表示半透明 */ opacity: 0.5; /** * opacity属性在IE8及以下的浏览器中不支持 * * IE8及以下的浏览器需要使用"alpha(opacity=透明度)"属性代替,其中透明度需要一个0-100之间的值: * 0: * 表示完全透明 * 100: * 表示不透明 * 50: * 表示半透明 * * 这种方式也支持IE6,但是这种效果在IE Tester中无法测试 */ filter: alpha(opacity=50); } </style> </head> <body style="height: 5000px;"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
二.浏览器打开以上代码渲染结果
