你可以将STYLE放在BODY里啊.如冲孝下:
游判孙
不过,只有IE支持就是了.要想所有浏览器都支持的比较好,建议用图片当背景~
//可以用CSS属性linear-gradient,都可以,多种颜色一点问题都没有。
/* Firefox 3.6◆ */
background: -moz-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), color-stop(0.5, 前卖#ace), color-stop(0.75, #f96), to(#ace));
/* Safari 5.1◆, Chrome 10◆ */
background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Opera 11.10◆ */
background: -o-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
CSS(层纤悔启叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准毁如通用标记语言的一个子集)等文件样式的计算机语言。
在background-image属性中使用linear-gradient()。
background-image: [ , ]
= | none
默认值:none
适用于:所有元素
继承性:无
动画性:否
计算值:指定值
取值:
none:无背景图。
:使用绝对或相对地址伏隐指或者创建渐变色来确定图像。
= linear-gradient([ [ | to ] ,]? [, ]◆)
= [left | right] || [top | bottom]
= [ |
]?
下述值用来表示渐变的方向,可以使用角度或者关键字来设置:
:
用角度值指定渐变的方向(或乎州角度)。
to left:
设置渐变为从右到左。相当于: 270deg
to right:
设置渐变从左到右。相当于: 90deg
to top:
设置渐变从下到上。岁厅蔽相当于: 0deg
to bottom:
设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
用于指定渐变的起止颜色:
指定颜色。
用长度值指定起止色位置。不允许负值
用百分比指定起止色位置。
说明:
用线性渐变创建图像。
如果想创建以对角线方式渐变的图像,可以使用 to top left 这样的多关键字方式来实现。
滤镜可以做,不过兼容性只有IE支持
css3标准里可以实现背景色渐变尺肆、圆角边框的语句\仿困祥
目前css2.0不支持这样的语备搏句,要实现真得用js
CSS3支陵茄返持颜色渐变,但目尺饥前主流浏览器对CSS3支持都不完全,甚至不支持。
所以你可以使用背纳纳景图片来做,你要竖向渐变,可以将图片切成宽1px的背景,然后设置这个DIV的背景平铺。如:background:url(bg.gif) left right repeat-x;
在Mozilla 下
background: -moz-linear-gradient( top,#ccc,#000);
参茄差颤数说明
1,起点位置top 是从上到下,left是从左到右,left top是左上到右下
2,开始颜色,
3,结束颜色
在Webkit下颤败庆纯
-webkit-linear-gradient(top,#ccc,#000);
参数与mozilla一致
在 Opera 下
background: -o-linear-gradient(top,#ccc, #000);
数与mozilla一致
更多的参数应用可以去度娘查询,有很详细参数使用示例.
如果只要求兼容高级浏览器,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手册里查到。
以上就是土嘎嘎小编大虾米为大家整理的css背景渐变填充怎么设置_css,如何实现,颜色的渐变?相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!