Rumah > Artikel > hujung hadapan web > gradient渐变IE兼容处理方法解释

gradient渐变IE兼容处理方法解释

高洛峰asal: 2017-03-21 14:32:172117semak imbas

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

实例代码：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>gradient 兼容性处理</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: #000000;
                background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
                background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
            }
        </style>
    </head>

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

</html>

chrome浏览器效果：

gradient渐变IE兼容处理方法解释

IE8浏览器效果（无渐变）：

gradient渐变IE兼容处理方法解释

rgba兼容性处理：

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                background: #000000;
                background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
                background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
                /*关键属性设置*/
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;, GradientType=0);
            }

设置filter属性目的是上一行的透明度不起作用的时候执行，filter: progid:DXImageTransform.Microsoft.gradient是用来做渐变的，GradientType:可读写，设置或检索色彩渐变的方向：
　　1:默认值。水平渐变。
　　0:垂直渐变。

总结：至此完成IE9以及以下IE浏览器gradient兼容性处理。

Atas ialah kandungan terperinci gradient渐变IE兼容处理方法解释. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：使用css清除浮动七种方法的优缺点Artikel seterusnya：详解rgba兼容性处理方法

Artikel berkaitan

Lihat lagi