CSS 문서: 페이지 배경에 그라데이션 효과를 설정하는 방법(자세한 코드 설명)
- 奋力向前원래의
- 2021-08-03 17:43:5314932검색
이전 글 "html을 활용해 간결한 제출폼 만드는 방법(자세한 코드 설명)"에서 html을 활용해 폼을 만드는 방법을 소개해드렸는데요. 다음 글에서는 CSS를 사용하여 배경색 그라데이션을 설정하는 방법을 소개합니다.
다양한 각도에서 다양한 색상을 각자의 방식으로 표현할 수 있습니다.
RGB 모드에서는 빨간색, 녹색, 파란색의 다양한 에너지 비율을 결합하여 모든 색상을 얻을 수 있습니다.
예:
rgb(100%, 0%, 0%)는 빨간색입니다.
rgb(100%, 50%, 0%)는 주황색-빨간색입니다. %)는 보라색입니다.
이 값은 브라우저에서 별도로 테스트할 수 있습니다
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
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
6. 색상의 그라데이션 순서를 설정하세요. 더 많은 색상을 설정할 수 있습니다.
위 내용은 CSS 문서: 페이지 배경에 그라데이션 효과를 설정하는 방법(자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!