Home >Web Front-end >CSS Tutorial >CSS article: How to set a gradient effect on the page background (detailed code explanation)
CSS article: How to set a gradient effect on the page background (detailed code explanation)
- 奋力向前Original
- 2021-08-03 17:43:5315042browse
In the previous article "How to use html to make a concise submission form (detailed code explanation)", I introduced how to use html to make a form. The following article will introduce to you how to use css to set the background color gradient. Let's see how to do it together.
#They can all represent any color in their own way, just from different angles.
In RGB mode, all colors can be obtained by combining different energy ratios of red, green, and blue.
For example:
rgb (100%, 0%, 0%) is red;
rgb (100%, 50%, 0%) is orange-red;
rgb (80%, 0%, 100%) is purple.
You can test these values separately in the browser
root { background rgb(100% 0% 0%); }rgb (100%, 0%, 0%) can also be written as rgb (255, 0, 0), each primary color is divided into 255 equal parts.
0 means no intensity at all, 255 means the highest intensity. Although rgb(255,0,0) and rgb(100,0,0) are both red, the former looks more vivid than the latter because of its high luminous intensity.
This is also well proven in black and white. Black in RGB mode is rgb (0, 0, 0) (all three emits no light), while white is rgb (255, 255, 255) (all three emits the strongest light).
How to set div gradient background with CSS
1. Use a div tag.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css颜色渐变</title> </head> <body> <div> </div> </body> </html>
2. Set the <div> tag inside the <code>header tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>3. For color gradient, you need to set width and height, width and height for div.
<!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. Then set the background background attribute of div. Use -webkit-linear-gradient for background color 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. Write top in -webkit-linear-gradient, and set the gradient to start from the top and end at the bottom. If you write top, don’t write 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. Then set the gradient order of the colors. You can set more colors.
<!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>The renderings are as follows:
Recommended learning: CSS video tutorial
The above is the detailed content of CSS article: How to set a gradient effect on the page background (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!