在css3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加了3种颜色值-RGBA颜色值,HSL颜色值及HSLA颜色值,并且允许通过对RGBA颜色值和HSLA颜色值设定alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。
alpha通道与opacity属性的区别
opacity属性时css中专门用来指定透明度的一个属性,取值范围也在0-1之间,0表示完全透明,1表示不透明。使用alpha通道对元素设定透明度时,可以单独针对元素的背景色和文字颜色等来指定透明度,而opacity属性只能指定整个元素的透明度。
但alpha通道与opacity属性并不兼容ie9以下的版本,以下为本人利用滤镜等方式解决了此问题,兼容各个版本。
RGBA方法(兼容各个版本)
- <!DOCTYPE HTML>
- <html lang="zh-CN">
- <head>
- <Meta charset="UTF-8">
- <title>RGBa 与 opacity 效果的区别</title>
- <!--以下为通用浏览器的写法-->
- <style type="text/css">
- .main{ background:#000; width:300px; height:300px; }
- .main-1{ background:rgb(255,255); background:rgba(255,0.2);width:300px; height:50px; }
- </style>
- <!--以下为针对ie浏览器的写法-->
- <!--[if IE]>
- <style type="text/css">
- .main-1{
- background: transparent;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#20ffffff', endColorstr='#20ffffff');
- zoom: 1;
- }
- <![endif]-->
- </head>
- <body>
- <div class="main"><div class="main-1"></div></div>
- </body>
- </html>
opacity方法(兼容各个版本)
- .main{ background:#000; width:300px; height:300px; }
- .main-1{ background:#fff; filter:alpha(opacity=20);opacity:0.2;width:300px; height:50px; }
- </style>
- </head>
- <body>
- <div class="main"><div class="main-1"></div></div>
- </body>
- </html>