CSS3의 색상 값 RGBA 및 그라데이션 색상에 대한 자세한 설명(그림)

CSS3 이전의 그라데이션 색상사진배경 이미지만 사용할 수 있습니다
CSS3 그라데이션 구문을 사용하면 이미지 다운로드 비용을 절약할 수 있습니다
. 브라우저 해상도를 바꾸면 더 좋은 효과가 있습니다

색상 값 RGBA

우리에게 익숙한 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);}

---

각도 0deg는 상단과 동일하며, 각도를 늘리는 것은 시계 방향 회전과 같습니다

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

입력하지 않으면 브라우저는 기본적으로 세 가지 색상 값을 균등하게 나눕니다. ​​​기본값은 0%, 50%, 100%

---

또한 흔하지 않은 기능인 반복-선형-그라디언트를 사용하여 선형 그라디언트를 반복할 수 있습니다

.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);}

는 그라데이션 크기를 나타냅니다. 100px*100px이고, 그래디언트 위치는 50px*50px

---

방사형 그래디언트에도 그래디언트를 반복하는 기능이 있습니다

사용법은 선형 그래디언트와 비슷합니다 , 여기 더 이상 설명이 없습니다

.demo {    width: 200px;    height: 100px;    background: repeating-radial-gradient(red 10%,lime 20%,blue 30%);}

위 내용은 CSS3의 색상 값 RGBA 및 그라데이션 색상에 대한 자세한 설명(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!