详解rgba兼容性处理方法

来源：动视网责编：小采时间：2020-11-27 18:52:20

详解rgba兼容性处理方法

详解rgba兼容性处理方法:根据caniuse（http://caniuse.com/#search=rgba），rgba兼容性为IE9以及以上浏览器。实例代码：<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>

推荐度：

点击下载本文 文档为doc格式

导读详解rgba兼容性处理方法:根据caniuse（http://caniuse.com/#search=rgba），rgba兼容性为IE9以及以上浏览器。实例代码：<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>

根据caniuse（http://caniuse.com/#search=rgba），rgba兼容性为IE9以及以上浏览器。

详解rgba兼容性处理方法

实例代码：

<!doctype html>
<html>

 <head>
 <meta charset="UTF-8" />
 <title>rgba 兼容性处理</title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 
 .parent {
 width: 400px;
 height: 400px;
 margin: 100px;
 font-size: 20px;
 color: #FF0000;
 border: 1px solid red;
 background-color: rgba(0, 0, 0, 0.5);
 }
 </style>
 </head>

 <body>
 <div>
 rgba
 </div>
 </body>

</html>

chrome浏览器效果：

详解rgba兼容性处理方法

IE8浏览器效果（无背景）：

详解rgba兼容性处理方法

rgba兼容性处理：

.parent {
 width: 400px;
 height: 400px;
 margin: 100px;
 font-size: 20px;
 color: #FF0000;
 border: 1px solid red;
 background: rgba(0, 0, 0, 0.5);
 /*下一句关键设置*/
 filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000);
 }

设置filter属性目的是上一行的透明度不起作用的时候执行，filter: progid:DXImageTransform.Microsoft.gradient是用来做渐变的，但是这个地方不需要渐变，所以两个颜色都设置成了相同的颜色。