CSS3를 사용하여 배경색 그라데이션 구현

이 기사소개합니다CSS3을 사용하여 배경색 그라데이션 달성

CSS 그라데이션 색상 개념:

CSS 그라데이션(그라디언트)을 사용하면 색상 그라데이션을 사용할 수 있습니다. 공간을 수정합니다(한 색상에서 다른 색상으로 전환). 공간을 채웁니다. 그라데이션 색상에는 선형(선형 그라데이션)과 방사형(원형 그라데이션)의 두 가지 형태가 있습니다. 분명히 CSS 그래디언트 색상(Gradients) 기술은 시각적 패턴 효과를 생성하며 이러한 시각적 효과를 얻는 것은 매우 간단하며 간단한 프로그래밍을 통해 얻을 수 있습니다. CSS 그래디언트는 CSS3 초기에 도입되었지만 이 기술을 홍보하는 데 오랜 시간이 걸렸습니다.

CSS 그래디언트 기술의 기본 구문:

통합 코드 형식

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

첫 번째 매개변수 그라데이션 시작점 또는 모서리입니다. 두 번째 매개변수는 색상 정지점입니다. 최소 두 가지 색상(시작점과 끝점)이 필요하며 원하는 색상을 추가하여 색상 그라데이션의 풍부함을 높일 수 있습니다. 색상 정지점 의 정의는 색상이거나 색상에 백분율을 더할 수 있습니다.

/*  color-stop(percentage/amount, color) */
color-stop(0.20, red)

다음 코드는 기본적으로 모든 항목을 포함합니다. 하향식 색상 그라데이션의 경우:

{	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), 
　　　　　color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);	
　　　　　/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);	
　　　　 /* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
　　　　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";	
　　　　 /* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}

CSS 그라데이션 기술은 45도 각도 그라데이션과 같은 각도가 있는 그라데이션 방향도 지원합니다.

rree

CSS 색상 그라데이션(Gradients) 기술은 가치가 있지만 구현하기 어려울 때도 있습니다. 때로는 원하는 그라데이션을 이미 구현했으며 브라우저 지원이 문제가 될 수 있습니다. 다음은 CSS 색상 그라디언트(그라디언트) 사용에 대한 몇 가지 제안 사항입니다.

• CSS 색상 그라디언트(그라디언트)가 어느 정도 투명도를 표시하길 원하시나요? RGBA 색상을 사용하세요.

• 브라우저가 지원하지 않는 경우 실수로 색상이 나오지 않는 것을 방지하기 위해 배경색을 하단으로 사용하세요.

• Firefox 와 Google Chrome은 모두 반복 선형 그라데이션과 반복 방사형 그라데이션을 지원합니다.

/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), 
　　　　　color-s top(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}

효과:

기본 색상 선형 그라데이션, 위에서 아래로

기본 색상 선형 그라데이션, 45도 각도(Chrome, Safari, Firefox, IE10, Opera)

위 내용은 CSS3를 사용하여 배경색 그라데이션 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!