IE CSS 배경 문제

Question

IE가 "라이너 그라디언트"를 지원하지 않으므로 다음 사항이 맞습니까?

background: #f5f7f9; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */ 
    background:url(../img/backgrounds/form_bg.png) 0 0 no-repeat; 

기본적으로 대체 이미지가 제공됩니다.

이

는 IE9에서 작업

Answer 1

먼저 아래에있는 폭포에서 대체 첫을 넣어하지 않습니다. 예 :

 
body { 
    background: url(http://placekitten.com/500/500) top center #cdcdcd no-repeat; 
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */ 
} 

최신 브라우저는 그라디언트를 배경 이미지의 한 종류로 간주합니다. 폴백을 먼저 사용하면 폴백을 이해할 수있는 브라우저가 폴백을 사용하고 다른 스펙을 이해할 수있는 브라우저는 폴백을 그라데이션으로 대체합니다. 예를 들어 IE7은 배경 이미지 만 이해하고 그라데이션은 무시합니다. Chrome은 배경 이미지를 처리 ​​한 다음 linear-gradient으로 배경 이미지를 덮어 씁니다.

두 번째로, -ms-linear-gradient은 IE10에서 지원됩니다. 그것은 IE9에서 지원되지 않기 때문에 IE9 이하에서는 작동하지 않습니다.

당신은 6 예를 통해 IE9 필터를 사용할 수 있습니다

: 필터를 사용하는 경우 IE 6부터, 당신은 또한 대체 이미지를 사용하지 않도록해야합니다

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3838', endColorstr='#00ffffff',GradientType=0); /* IE6-9 */ 

-와 배경 이미지를 대체하지 않습니다 (9) 필터. 나는 conditional comments으로 이것을하는 것을 선호한다 :

<!--[if (gte IE 6)&(lte IE 9)]> 
<style type="text/css"> 
body { background-image: none; } 
</style> 
<![endif]--> 

조건부 코멘트는 HTML이다.

마지막으로 대부분의 사이트에는 -moz, -webkit 또는 -o 접두어가 필요하지 않습니다. 각각은 supported the standard linear-gradient for a while입니다.