你只有个文档类型标签，但是没写类型值，肯定不行的，至少协商html啊，如下
<!DOCTYPE html>虽然老旧版本的IE的怪异模式的确是很怪异的。
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); / Saf4+, Chrome /
filter: progid:DXImageTransformMicrosoftgradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); / IE/
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。
第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。
第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。
第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，05为中点，1为结束点；第二个表示该点的颜色。
页面背景颜色渐变可以分为四个部分
一、从上往下渐变：
FILTER: progid:DXImageTransformMicrosoftGradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、从左上至右下渐变：
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}
三、从左往右渐变：
FILTER: progid:DXImageTransformMicrosoftGradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、从上往下渐变：
下面是整合的完整格式：
如果是在同一个页面里面显示多重渐变效果，可以定义每个渐变的width和height。
background:-webkit-gradient(linear ,10% 10%，100% 100%，
color-stop(014,rgb(255,0,0)),
color-stop(05,rgb(255,255,0)),
color-stop(1,rgb(0,0,255)) );
第一个参数：表示的是渐变的类型
linear线性渐变
第二个参数：分别对应x，y方向渐变的起始位置
第三个参数：分别对应x，y方向渐变的终止位置
第四/五/N个参数：设置渐变的位置及颜色
(2)第二种写法：这种写法比较简单，而且效果比较自然
background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));
第一个参数：表示的是渐变的类型
linear线性渐变
第二个参数：分别对应x，y方向渐变的起始位置
第三个参数：分别对应x，y方向渐变的终止位置
第四个参数：设置了起始位置的颜色
二Mozilla浏览器
(1)第一种写法：
background:-moz-linear-gradient(10 10 90deg,
rgb(25,0,0) 14%,
rgb(255,255,0) 50%,
rgb(0,0,255) 100%);
第一个参数：设置渐变起始位置及角度
第二/三/四/N个参数：设置渐变的颜色和位置
(2)第二种写法：这种写法比较简单，而且效果比较自然
background:-moz-linear-gradient(top, ＃FFC3C8,＃FF9298);
第一个参数：设置渐变的起始位置
第二个参数：设置起始位置的颜色
第三个参数：设置终止位置的颜色
三IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransformMicrosoftgradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型
0 代表竖向渐变 1 代表横向渐变
注意：这里设置背景的时候不需要给background设置，直接用filter即可，不要和其他的浏览器混淆
第五个参数：设置了终止位置的颜色
代码演示：
效果图：
代码：
效果：
1、打开html开发工具，新建一个html文件在html代码页面创建一个<div>并给这个标签添加一个类名linear：
2、然后为类设置样式。在title后面创建一个style标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式，这里的第一个参数是设置渐变的方向，后面两个参数是起始颜色和终止颜色。设置好后去浏览器查看效果：
3、保存好html文件后使用浏览器查看效果。就会看到一个绿色到红色的渐变了。以上就是html中让背景颜色渐变的设置方法介绍：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）