CSS3 이전의 그라데이션 색상사진배경 이미지만 사용할 수 있습니다
CSS3 그라데이션 구문을 사용하면 이미지 다운로드 비용을 절약할 수 있습니다
. 브라우저 해상도를 바꾸면 더 좋은 효과가 있습니다
우리에게 익숙한 RGB 색상 표준은 r(빨간색), g(녹색), b(파란색)으로 구성되어 있습니다. 색상이 겹쳐지고 변경되어 다양한 색상을 형성합니다
0~255 또는 0~100% 값
rgba는 rgb를 기반으로 하며 알파 불투명도 매개변수를 추가합니다
.demo { width: 100px; height: 100px; background-color: rgb(255, 0, 0);}
.demo { width: 100px; height: 100px; background-color: rgba(255, 0, 0, 0.5);}
alpha는 0~1의 값을 가지며, 값이 작을수록 투명해집니다
gradient는 "기울기"를 의미하고 선형은 "선형"을 의미합니다
그라디언트 색상은 여러 색상 사이를 부드럽게 전환하여 화려한 색상을 형성합니다.
선형 그라데이션 선형 그라데이션 매개변수에는 그라데이션 방향(선택 사항)과 임의의 숫자가 있습니다. 그라디언트 색상
.demo { width: 100px; height: 100px; background: linear-gradient(red,lime,blue);}
여기서 작성한 내용은 배경색이 아니라 배경색입니다
(사실 그라디언트 색상은 배경 이미지의 기능입니다)
그라데이션 방향을 채우지 않을 경우 기본값은 위에서 아래로
그라데이션 방향은 다음 속성<🎜을 가집니다 >값
상단, 하단(기본값), 왼쪽, 오른쪽 왼쪽 상단, 오른쪽 위, 왼쪽 아래, 오른쪽 아래
또는 각도 xxxdeg를 입력하세요.
예를 들어 왼쪽 위는 방향이 왼쪽 위를 향한다는 뜻입니다
.demo { width: 100px; height: 100px; background: linear-gradient(to top left,red,lime,blue);}
.demo { width: 100px; height: 100px; background: linear-gradient(20deg,red,lime,blue);}
.demo { width: 100px; height: 100px; background: linear-gradient(red 30%,lime 50%,blue 70%);}
.demo { width: 100px; height: 100px; background: repeating-linear-gradient(red, rgba(100,100,100,0.5),blue 50%);}
결과는 이렇게 보기 흉한 그라데이션 색상입니다
방사하는 그라데이션 중심입니다 그라디언트
.demo { width: 200px; height: 100px; background: radial-gradient(red,lime,blue);}
와 유사하지만 먼저 첫 번째 매개변수(선택 사항)는 방사형 그라디언트의 그라디언트 모양과 위치입니다. .
원 또는 타원형 타원을 사용할 수 있습니다(기본값)
.demo { width: 200px; height: 100px; background: radial-gradient(circle,red,lime,blue);}
.demo { width: 200px; height: 100px; background: radial-gradient(circle at 30% 30%,red,lime,blue);}
한 값만 쓰면 다른 값은 기본적으로 중간 위치의 50%로 설정됩니다
.demo { width: 200px; height: 100px; background: radial-gradient(circle at 30%,red,lime,blue);}
.demo { width: 200px; height: 100px; background: radial-gradient(100px 100px at 50px 50px,red,lime,blue);}
사용법은 선형 그래디언트와 비슷합니다 , 여기 더 이상 설명이 없습니다
.demo { width: 200px; height: 100px; background: repeating-radial-gradient(red 10%,lime 20%,blue 30%);}
위 내용은 CSS3의 색상 값 RGBA 및 그라데이션 색상에 대한 자세한 설명(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!