CSS3实现背景颜色线性渐变gradient

HTML/CSS 2013-04-24 gradient,渐变,兼容

CSS3新加特性gradient可以实现背景颜色,鉴于各浏览器之间还有兼容性因此这里只说线性渐变,其它渐变就算是有也不敢贸然使用。

Mozilla

仅针对FireFox

background: -moz-linear-gradient(top, #eee, #aaa);

linear 表示线性,参数top表示从顶部开始,参数#eee表示开始颜色,#aaa表示结束颜色

效果:

Webkit

解决:Chrome 、Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa));

linear 表示线性、0 0 表示开始位置的x与y的位置,0 100%表示结束的xy位置,from(#eee)表示从这个颜色开始,to(#aaa)表示渐变到这个颜色

Chrome:

Safari:

Opera

代码:

background: -o-linear-gradient(top, #eee, #aaa);

同Mozilla一样用法,只不过前缀-moz修改成-o即可

效果:

IE9 and IE 10

代码:

background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);

#eeeeee 0% 表示从什么颜色位置开始,#aaaaaa 100%表示到什么颜色以及结束位置

IE9:

IE10:

IE7 and IE8

这个两个浏览器使用的事滤镜,跟CSS3没有半毛关系,只不过能在低端IE中解决这个问题也是解决兼容的一个做法,但注意不要大量使用,耗资源!

IE7代码:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);

startColorstr开始颜色,endColorstr结束颜色,grandientType渐变方向

IE7效果:

IE8代码:

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);

参数同IE7类似,只不过在filter加了一个-ms-前缀

IE8效果:

整合兼容

我们把各个浏览器的背景颜色渐变都写上就解决各浏览器间的背景颜色渐变了

background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); /** Chrome Safari **/ 
background: -moz-linear-gradient(top, #eee, #aaa); /** FireFox **/
background: -o-linear-gradient(top, #eee, #aaa);  /** Opear **/ 
background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);  /** IE9 IE10 **/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE7 **/ 
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE8 **/

但为了要一个通用的背景渐变要写六行代码,不见得比图片省事,要么也可以结合后端语言做一个功能,输入渐变的起始颜色与结束颜色后生成以上代码。各有所长,看心态吧!

文字链接:《CSS3实现背景颜色线性渐变gradient

文章地址:http://www.qttc.net/201304316.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 5

  • 用这个做按钮什么的,方便又强大,网上也有很多生成器。可以使用。PS:调用你的 api 怎么一直是那几篇文章啊?是我写的有问题还是你那的 api 上一直没有增加新文章啊?我好像只获取了”精选文章“
    2013-05-17 19:35:57 [ 跟帖 ]
    api没有问题,通常我感觉不错的文章,才会设置为精选!
    2013-05-18 11:37:09 [ 跟帖 ]
    你是通过 RSS 来获取我的文章列表吗?那我有办法控制我的吗?
    2013-05-18 15:21:28 [ 跟帖 ]
    还有,你用的主机速度很快,IP是上海市的,那是什么主机?不会是 Linode 吧?
    2013-05-18 15:22:09 [ 跟帖 ]
    你的文章是我写了一个蜘蛛,然后每天抓取你的站点一次。我静态放阿里云,后端程序放Linode
    2013-05-18 18:46:29 [ 跟帖 ]
    1 #