Internet Explorer 9 이상에서는 그라데이션을 어떻게 구현합니까?-CSS 튜토리얼-php.cn

Internet Explorer 9 이상에서는 그라데이션을 어떻게 구현합니까?

Mary-Kate Olsen

풀어 주다： 2024-11-22 10:57:11

원래의

751명이 탐색했습니다.

How do you implement gradients in Internet Explorer 9 and beyond?

Internet Explorer 9 이상의 그라데이션

웹 개발 영역에서 그라데이션은 시각적으로 매력적이고 매력적인 인터페이스를 만드는 데 없어서는 안 될 요소가 되었습니다. Internet Explorer 9는 이제 레거시로 간주되지만 그라데이션 지원과 관련하여 여전히 논쟁거리로 남아 있습니다.

IE9 그라데이션 접두사 쿼리

한 개발자는 Internet Explorer 9의 공급업체 접두사에 대한 명확한 설명을 구했습니다. IE9의 그래디언트는 독점 필터 사용에 대한 혼란을 표현합니다. 이 문제를 해결하기 위해 우리는 여러 브라우저에 걸친 포괄적인 그라데이션 구현으로 전환합니다.

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

로그인 후 복사

최신 브라우저 그라데이션

그러나 웹 개발이 진행됨에 따라 IE10은 새로운 기능을 도입했습니다. 그래디언트 구문에 이어 다른 주요 브라우저에서도 유사한 구현이 이어집니다. 다음은 최신 브라우저의 그라데이션 지원을 보여주는 업데이트된 코드 조각입니다.

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

로그인 후 복사

이 업데이트된 코드를 사용하면 IE10 이상을 포함한 모든 주요 브라우저에서 일관된 그라데이션 렌더링을 달성할 수 있습니다. 최신 브라우저는 색상 정의에 16진수 표기법 대신 rgb/rgba 값 사용을 지원한다는 점을 기억하세요.

위 내용은 Internet Explorer 9 이상에서는 그라데이션을 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!