利用css3可实现背景颜色渐变:
一、线性渐变:
1、线性渐变在 Mozilla 下的应用
语法:
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
2、线性渐变在 Webkit 下的应用
语法:
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
3、线性渐变在 Opera 下的应用
语法:
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */
二 径向渐变
语法:
-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
如果只要求兼容高级浏览器,CSS3可以解决。
.box{width:500px;height:100px;background-image: -moz-linear-gradient(top , #45B5DA, #0382AD);background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));background-image: -o-linear-gradient(top , #45B5DA, #0382AD);}
如果要兼容低级浏览器,例如IE6,还是用背景图片重复吧。
上面的这属性可以在CSS手册里查到。
本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。