IE9+와 호환되는 CSS3 그라데이션 배경색을 사용하는 방법

배경색은 단색 외에도 다양한 색상 조합을 사용하여 그라데이션 배경색을 만들어 페이지를 풍성하게 만들 수도 있습니다.

그라데이션 배경은 두 가지 유형으로 나뉩니다.

2. 원형 그라데이션

선형 그라데이션은 가로, 세로, 대각선의 세 가지 유형으로 나뉩니다. 그래디언트 Gradient

Syntax

:

= 선형-그라디언트([ [ | to ] ,]? [, <색상 중지>]+)<측면 또는 모서리>

= [왼쪽 | 오른쪽] || [상단 | 하단]

<색상 중지>

= < ; 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!