详解rgba兼容性处理方法-css教程-PHP中文网

详解rgba兼容性处理方法

高洛峰

发布： 2017-03-21 14:36:32

原创

1817 人浏览过

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

详解rgba兼容性处理方法

实例代码：

登录后复制

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是用来做渐变的，但是这个地方不需要渐变，所以两个颜色都设置成了相同的颜色。