如何把页面背景设定渐变效果(编码详细说明)-开发网

其他回答《如何使用html制作一个简洁的提交表单（代码详解）》中，给大家介绍了如何使用html制作一个表格。下边本文为大家介绍如何使用css设定背景颜色渐变色呢，我们一起看看如何做。

如何把页面背景设定渐变效果(编码详细说明)

他们都能够以自己的方式表明一切色调，只不过是方向不同。

在RGB模式下，全部颜色都能用红（red）绿（green）蓝（blue）的差异比得上组成获得。

如:

rgb（100%，0%，0%）为红色；

rgb（100%，50%，0%）为桔红色；

rgb（80%，0%，100%）为蓝紫色。

能够用浏览器内各自检测这些值

root { background rgb(100% 0% 0%); }

rgb（100%，0%，0%）也可以写出rgb（255，0，0），每一种本色被分为255均分。
0表明没有一点抗压强度，255表明最高强度。尽管rgb（255，0，0）和rgb（100，0，0）全是鲜红色，但前面一种会比后面一种看起来更加艳丽，由于其亮度单位高。
这一点用黑白色也挺好证实。RGB模式中的黑色是rgb（0，0，0）（三项也不发亮），而白色是rgb（255，255，255）（三项都发最强光照）。

CSS设定div渐变背景的办法

1、使用一个div标识。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css渐变色</title> 
</head>
<body>
<div>
</div>
</body>
</html>

2、header标识里边设定<div>标识。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css渐变色</title> 
<style type="text/css">
div{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

3、渐变色，应该给div设置width和height，总宽和高度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css渐变色</title> 
<style type="text/css">
div{
width:150px;
height:70ps;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

4、随后设定div的background环境特性，环境渐变色就用到-webkit-linear-gradient。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css渐变色</title> 
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient();
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

5、在-webkit-linear-gradient里边写top，设置渐变色从顶端逐渐，到底端完毕。写top就别写bottom。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css渐变色</title> 
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient(top);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

6、再设置色调的渐变色次序，色调能够设置多。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css渐变色</title> 
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient(top,white,lightblue,skyblue);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

设计效果图如下所示：

如何把页面背景设定渐变效果(编码详细说明)