CSS 문서: 페이지 배경에 그라데이션 효과를 설정하는 방법(자세한 코드 설명)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 문서: 페이지 배경에 그라데이션 효과를 설정하는 방법(자세한 코드 설명)

奋力向前

Aug 03, 2021 pm 05:43 PM

css

이전 글 "html을 활용해 간결한 제출폼 만드는 방법(자세한 코드 설명)"에서 html을 활용해 폼을 만드는 방법을 소개해드렸는데요. 다음 글에서는 CSS를 사용하여 배경색 그라데이션을 설정하는 방법을 소개합니다.

CSS 문서: 페이지 배경에 그라데이션 효과를 설정하는 방법(자세한 코드 설명)

다양한 각도에서 다양한 색상을 각자의 방식으로 표현할 수 있습니다.

RGB 모드에서는 빨간색, 녹색, 파란색의 다양한 에너지 비율을 결합하여 모든 색상을 얻을 수 있습니다.

예:

rgb(100%, 0%, 0%)는 빨간색입니다.

rgb(100%, 50%, 0%)는 주황색-빨간색입니다. %)는 보라색입니다.

이 값은 브라우저에서 별도로 테스트할 수 있습니다

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

1로 div 그라데이션 배경을 설정하는 방법 `div` 태그를 사용하세요.

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

2. header 태그 안에 <div> 태그를 설정하세요. <code>div标签。

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

2、header标签里面设置<div>标签。<pre class='brush:php;toolbar:false;'><!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></pre><p>3、颜色渐变，需要给<code>div设定width和height，宽度和高度。

<!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>

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(top);
			}
		</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,white,lightblue,skyblue);
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

3 색상 그라데이션의 경우 너비와 높이, div의 너비와 높이를 설정해야 합니다.

rrreee

4. 그런 다음 div의 배경 배경 속성을 설정하세요. 배경색 그라데이션에는 -webkit-linear-gradient를 사용하세요.

rrreee

5. -webkit-linear-gradient에 top을 작성하고, 위에서부터 시작하여 아래에서 끝나도록 그라데이션을 설정합니다. 상단이라고 쓴다면 하단이라고 쓰지 마세요.

rrreee CSS 문서: 페이지 배경에 그라데이션 효과를 설정하는 방법(자세한 코드 설명) 6. 색상의 그라데이션 순서를 설정하세요. 더 많은 색상을 설정할 수 있습니다.