고도 및 세 번째 색상을 사용하도록 IE 그래디언트 CSS를 수정하려면 어떻게해야합니까?

Question

내가 그라디언트에 대해 다음과 CSS가 : IE의 10 버전에 대한

background: -ms-linear-gradient(top, #d7d6d2 0%,#f9ffff 437px,#ffffff 100%); 

IE 10

를 들어 IE 8 ~ 9

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d6d2',] 
endColorstr='#f9ffff', GradientType=1); 
/* IE 8–9 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d6d2', 
endColorstr='#f9ffff', GradientType=1)"; 

를 들어

을 나는 3 색 있습니다. 처음 두 개는 그라디언트를 만들고 #ffffff 인 세 번째 색상은 그라데이션이 끝나면 나머지 페이지를 흰색으로 표시합니다. 그리고 437px는 그라디언트의 높이를 정의합니다.

IE8 버전의 CSS 그래디언트를 수정하면 IE 10 버전의 기능을 얻을 수 있습니까?

Answer 1

IE8/9에서 그라디언트를 수행하는 가장 좋은 방법은 CSS3Pie을 사용하는 것입니다.

이것은 이전 버전의 IE에 표준 CSS 그래디언트 구문을 구현하는 Javascript polyfill 라이브러리입니다. (border-radius과 같은 몇 가지 다른 기능도 제공합니다).

Pie.htc 파일을 다운로드하여 지침에 따라 사이트에 추가하기 만하면 IE 6-9에서 표준 CSS 그래디언트를 사용할 수 있습니다.

질문에 직접 대답하려면 : CSS3Pie의 그라디언트는 그라디언트 색상 중지를 지원합니다. (그러나 그것이 없어도 -ms-filter 이상의 구문을 개선하면 사용하고자하는 동기가 충분합니다.)

희망이 있습니다.

Answer 2

IE8은 그래디언트 정지를 지원하지 않습니다. 주어진 요소 (예 : div 또는 버튼)에는 두 가지 색상 만 사용할 수 있습니다.

IE9에 관해서는, 당신은 이와 같은 SVG 구배를 통해이 작업을 수행 할 수 있습니다

/* SVG as background image (IE9/Chrome/Safari/Opera) */ 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0Q3RDZEMiIgb2Zmc2V0PSIxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y5RkZGRiIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGRkZGIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODM1KSIgLz4KPC9zdmc+); 

Microsoft는 괜찮은 SVG 그라디언트 생성기 here 있습니다.

당신에게 호소력이 없다면, 이미 this SO question에서 논의 된 정지를 시뮬레이션 할 수 있습니다.