CSS article: How to set a gradient effect on the page background (detailed code explanation)-CSS Tutorial-php.cn

CSS article: How to set a gradient effect on the page background (detailed code explanation)

奋力向前

Release： 2021-08-03 18:19:47

Original

14981 people have browsed it

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.

CSS article: How to set a gradient effect on the page background (detailed code explanation)

#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%); }

Copy after login

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>

Copy after login

2. Set the <div> tag inside the 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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

The renderings are as follows:

CSS article: How to set a gradient effect on the page background (detailed code explanation)

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!