opacity:0.5;
filter:Alpha(opacity=40); //IE8以下
当我们设置opacity透明时,opacity后代元素会随着一起具有透明性,所以我们Opacity中的文字随着透明值下降越来越看不清楚,而RGBA不具有这样的问题,但是IE浏览器不支持rgba属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container{ width: 500px; height:378px; margin: 100px auto; position: relative; } .container i{ width: 500px; height:378px; position: absolute; top: 0px; color:#fff; font-size: 50px; background-color: #000; /* 字颜色会变 */ /* opacity: 0.4; filter: Alpha(opacity=40); */ /* 字颜色不会变 */ background: transparent; background-color: rgba(0, 0, 0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); } </style> </head> <body> <div class="container"> <i>喵喵喵</i> <img src="a6.jpg"> </div> </body> </html>