<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两种透明度表述</title> <style type="text/css"> body{ background: url(web/images/background.jpg); } .box1{ /* 此方法透明整个元素模块 ,不管是背景还是字体, 都会变得透明. 内容会变得难以辨认*/ width: 300px; height: 200px; font-size: 20px; line-height: 200px; color: white; text-align: center; background: black; /* 透明度需要兼容ie浏览器语句.*/ opacity: 0.3; filter: alpha(opacity=30) } .box2{ width: 300px; height: 200px; font-size: 20px; line-height: 200px; color: white; margin-top: 50px; text-align: center; /*rgba透明语句中,a的属性是不透明属性,用小数表示,1最大,0最小*/ background: rgba(0,0,0,0.3); /*只透明背景, 文字清晰依旧*/ } </style> </head> <body> <div class="box1">这是第1个元素块</div> <div class="box2">这是第2个元素块</div> </body> </html>