CSS背景色漸變寫法兼容ie6至ie9
發(fā)布時間:2014-06-05 16:07:02 作者:佚名
我要評論

很多地方都用到了線性漸變,比如:表單提交按鈕的背景,數(shù)據(jù)展示的標(biāo)題背景等等,本例使用css3:linear-gradient及ie 濾鏡:filter來實現(xiàn)
最近在項目中,有很多地方都用到了線性漸變,比如:表單提交按鈕的背景,數(shù)據(jù)展示的標(biāo)題背景等等,按照以前的做法是切 1px 圖片然后 repeat-x。下面我將介紹如何用 css 來完成該效果。
css3:linear-gradient
比如:黑色漸變到白色,代碼如下:
.gradient{
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%);
}
ie 濾鏡:filter
linear-gradient 在 ie9 以下是不支持的,所以對于 ie6 - ie8 我們可以使用濾鏡來解決,代碼如下:
.gradient{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
由于 filter 是 ie 的私有屬性,所以我們需要針對 ie9 單獨處理濾鏡效果,代碼如下:
:root {filter:none;}
總結(jié):
綜上所述,線性漸變的兼容寫法如下:
.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 );
}
:root .gradient{filter:none;}
PS:
在實際的項目中,往往會碰到圓角和漸變的組合,如果使用上面的寫法,那么在 ie9 下會有 bug(在 ie9 下背景色不能完全切完),解決方法是SVG
css3:linear-gradient
比如:黑色漸變到白色,代碼如下:
復(fù)制代碼
代碼如下:.gradient{
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%);
}
ie 濾鏡:filter
linear-gradient 在 ie9 以下是不支持的,所以對于 ie6 - ie8 我們可以使用濾鏡來解決,代碼如下:
復(fù)制代碼
代碼如下:.gradient{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
由于 filter 是 ie 的私有屬性,所以我們需要針對 ie9 單獨處理濾鏡效果,代碼如下:
復(fù)制代碼
代碼如下::root {filter:none;}
總結(jié):
綜上所述,線性漸變的兼容寫法如下:
復(fù)制代碼
代碼如下:.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 );
}
:root .gradient{filter:none;}
PS:
在實際的項目中,往往會碰到圓角和漸變的組合,如果使用上面的寫法,那么在 ie9 下會有 bug(在 ie9 下背景色不能完全切完),解決方法是SVG
相關(guān)文章
CSS設(shè)置DIV背景色漸變顯示兼容IE/火狐/谷歌
DIV背景色漸變在以前的文章中也有介紹過,但并沒有同時兼容IE、火狐、谷歌,而本文的這個示例卻可以同時兼容,建議喜歡的朋友參考下2013-09-30CSS實現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果
這篇文章主要介紹了CSS實現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果,單純用css實現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變所有效果,因為UI沒給背景切圖,尋思這個理論上用css就能實現(xiàn)2021-10-27