Heim > Artikel > Web-Frontend > 兼容低版本IE浏览器的背景颜色渐变效果_html/css_WEB-ITnose
兼容低版本IE浏览器的背景颜色渐变效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:191203Durchsuche
兼容低版本IE浏览器的背景颜色渐变效果:
大多数的兼容性问题都是由于低版本的IE浏览器所导致的，本章节分享一段代码实例，它能够实现背景的颜色的渐变效果，如果在标准浏览器中直接采用css3属性即可实现，但是IE低版本的问题所以需要进行一下兼容性处理。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.gradient{ 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='#000000',endColorstr='#ffffff',GradientType=0); width:300px; height:100px; margin:0px auto;}:root .gradient{filter:none;}</style></head><body><div class="gradient"></div></body></html> 上面的代码实现了我们的要求，标准浏览器使用的linear-gradient属性，而低版本的IE浏览器则是使用的滤镜效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14244
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css清除浮动代码实例演示_html/css_WEB-ITnoseNächster Artikel：调整窗口大小也能够实现div水平垂直居中代码实例_html/css_WEB-ITnose