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

奋力向前
Release: 2021-08-03 18:19:47
Original
14989 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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template