배경색은 단색 외에도 다양한 색상 조합을 사용하여 그라데이션 배경색을 만들어 페이지를 풍성하게 만들 수도 있습니다.
그라데이션 배경은 두 가지 유형으로 나뉩니다.
2. 원형 그라데이션
선형 그라데이션은 가로, 세로, 대각선의 세 가지 유형으로 나뉩니다. 그래디언트 Gradient
Syntax:
<색상 중지>
= < ; color> [
to left: 오른쪽에서 왼쪽으로 그라데이션을 설정합니다. to right: 왼쪽에서 오른쪽으로 그라데이션을 설정합니다.
to top: 아래쪽에서 위쪽으로 그라데이션을 설정합니다. 아래로: 위에서 아래로 그라데이션을 설정합니다.
: 지정된 그라데이션의 시작 및 끝 색상을 설정합니다.
배경: 선형-그라디언트(매개변수 1, 매개변수 2, 매개변수 3, 매개변수 4...매개변수 N)
매개변수 1: 채울 수도 있고 안 채울 수도 있습니다. 예: 오른쪽으로, 즉 그라데이션 방향은 왼쪽에서 오른쪽입니다. 채워지지 않은 경우 그라데이션은 기본적으로 위에서 아래로 설정됩니다.매개변수 1': 기본적으로 -webkit-, -moz-, -o- 접두사의 경우에 작성된 매개변수 1과 동일합니다. 예: 왼쪽은 그라데이션 방향이 시작되는 위치를 나타냅니다.
매개변수 2: 그라데이션 시작 색상의 경우 rgba는 () 또는 #fff 또는 흰색으로 채워질 수 있으며 그 뒤에 색상의 비율을 나타내는 백분율이 올 수 있습니다. 예를 들어 #fff 50%는 흰색의 50%를 나타냅니다. 매개변수 3: 나중에 매개변수가 없으면 그라데이션 종료 색상이며, 이는 선택적인 매개변수 2 속성과 일치합니다.매개변수 4....매개변수 N: 추가할 수 있는 그라데이션 색상 노드입니다. 마지막은 그라데이션 종료 색상입니다
예:
linear-gradient(#fff, #75aaa3); linear-gradient(to bottom, #fff,#75aaa3); linear-gradient(to top, #75aaa3, #fff); linear-gradient(180deg, #fff, #75aaa3); linear-gradient(to bottom, #fff 0%, #75aaa3 100%);
그러나 호환되는 브라우저도 필요합니다.//从下至上
#text.btt{
background: -webkit-linear-gradient(bottom,#fff, #75aaa2);
background: -o-linear-gradient(bottom,#fff, #75aaa2);
background: -moz-linear-gradient(bottom,#fff, #75aaa2);
background: linear-gradient(to top,#fff, #75aaa2); /* 标准的语法(必须放在最后) */
}
//带透明度 #text.opac{ background: -webkit-linear-gradient(rgba(256,256,256,0), #75aaa2); background: -o-linear-gradient(rgba(256,256,256,0), #75aaa2); background: -moz-linear-gradient(rgba(256,256,256,0), #75aaa2); background: linear-gradient(rgba(256,256,256,0), #75aaa2); /* 标准的语法(必须放在最后) */ }
위 내용은 IE9+와 호환되는 CSS3 그라데이션 배경색을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!