㈠ WEB网页页面背景颜色渐变设置
页面上实现渐变背景有两种方法，一种是用背景图片，一种是用代码
如果渐变是自上而下的，并且渐变的顶部还想再加幅图，如果你需要让这幅图和渐变背景色的过渡平滑自然。那么，用背景图片比较适合你的要求
把渐变部分，切成宽为1像素，高为渐变全部高度。假定存为"bg.gif"
将这个bg.gif作为网页BODY区的背景图，并且设计背景图横向重复平铺。（注意的是，不要有纵向重复）
㈡ CSS怎样实现背景颜色渐变
background:-webkit-gradient(linear ,10% 10%，100% 100%，
color-stop(0.14,rgb(255,0,0)),
color-stop(0.5,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:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型
0代表竖向渐变 1 代表横向渐变
注意：这里设置背景的时候不需要给background设置，直接用filter即可，不要和其他的浏览器混淆
第五个参数：设置了终止位置的颜色
代码演示：
㈢ 怎样用css实现网页背景颜色渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向与径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变：
3.1、从上到下的线性渐变：
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
3.2、从左到右的线性渐变：
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
3.3、线性渐变 - 对角：
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
4.径向渐变：
4.1、颜色结点均匀分布的径向渐变：
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
4.2、颜色结点不均匀分布的径向渐变：：
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
4.3、形状为圆形的径向渐变：
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
㈣ html怎么实现网页背景色渐变动态选择
<!DOCTYPEhtml>
<html>
<head>
<style>
html{
width:100%;
height:100%;
}
#main{
display:flex;
justify-content:space-between;
}
</style>
</head>
<bodyid="main">
<div>
Start:<inputtype="color"id="start"onchange="setStart(this)"/>
</div>
<div>
End:<inputtype="color"id="end"onchange="setEnd(this)"/>
</div>
</body>
<script>
letstartColor=start.value='#ac3535'
letendColor=end.value='#d5c3c3'
functionsetColor(){
main.style.setProperty("background-image",`linear-gradient(toright,${startColor},${endColor})`)
}
functionsetStart(e){
startColor=e.value
setColor()
}
functionsetEnd(e){
endColor=e.value
setColor()
}
setColor()
</script>
</html>
㈤ html中如何让背景颜色渐变
1、打开html开发工具，新建一个html文件在html代码页面创建一个<div>并给这个标签添加一个类名linear：
㈥ css背景颜色怎么实现渐变效果
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
实例
从上到下的线性渐变：
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
-----------------------------------------------------------------------
径向渐变（Radial Gradients）- 由它们的中心定义
实例
颜色结点均匀分布的径向渐变：
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
㈦ div背景颜色怎样渐变 css实现div层背景颜色渐变代码
借助background-position实现渐变过渡
background-image虽然不支持CSS3transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。
(7)前端炫酷背景颜色渐变扩展阅读：mozilla 使用 CSS transitions