2013-01-20 3 views
2

배경 방사형 원형 그라디언트를 만드는이 코드는 아래에 있습니다.css3 배경 방사형 원형 그라디언트

가 IE를 제외한 모든 브라우저에서 잘 작동하고 (심지어 IE9에서 작동하지 않는)

나는 그것이 IE9과 IE8에도 작동하려면 위해 CSS로 무엇을 추가해야합니까?

http://jsfiddle.net/bhBtw/

코드 : 최대

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css" media="screen"> 
     html { 
      background-color: #eee; 
      height:768px; 
     } 
     div { 
      width: 96%; 
      height: 800px; 
      padding: 10px; 
      margin:0 auto; 
     } 

     div.circle { 
      background-image: radial-gradient(center center, circle cover, #352e24, #1a160d); 
      background-image: -o-radial-gradient(center center, circle cover, #352e24, #1a160d); 
      background-image: -ms-radial-gradient(center center, circle cover, #352e24, #1a160d); 
      background-image: -moz-radial-gradient(center center, circle cover, #352e24, #1a160d); 
      background-image: -webkit-radial-gradient(center center, circle cover, #352e24, #1a160d); 
     } 
    </style> 
</head> 
    <body> 
     <div class="circle"></div> 
    </body> 
</html> 

답변

7
  1. IE 9 등이 CSS 그라데이션을 지원하지 않습니다. IE 9 이상에서는 작동하지 않아야합니다.
  2. There is no need for the -ms-linear-gradient line. 그라디언트 are supported unprefixed in IE10 and they are not supported at all in IE9 and older.
  3. 항상 접두어가 붙지 않는 버전을 넣어 두어야합니다. 접두사가없는 구문을 지원하는 브라우저조차도 접두어가 붙지 않은 구문을 마지막에 넣지 않으면 접두사를 사용합니다.
  4. The new gradient syntax uses farthest-corner instead of cover. 그리고 이것이 기본값입니다, 그래서 당신은 그것을 떠날 수 있습니다.
  5. center은 position의 기본값입니다. 따라서이 값을 그대로 둘 수 있습니다.

는 IE9 이상 무엇을해야합니까? 별로.

  • 그 기울기와 linear IE filter gradient또는
  • 배경 이미지 또는
  • 단지 단색 (I이 경우에 가고 싶어하는 옵션이 제공 : 대체에 여기에 사용하는 두 가지 색상이 서로 다르지 않으며 대부분의 사람들은 눈에 띄지 않고 그곳에 그라데이션이 있다고 말할 수 없습니다.

6,그래서 그 코드가되어야 :이 경우 'PIE'플러그인을 사용하는 방법이

background: #352e24; /* ultimate fallback, always put this, just in case */ 

/* if you choose the IE filter linear gradient fallback */ 
filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr=#352e24, endColorstr=#1a160d); 

/* if you choose to use the image fallback */ 
background: url(gradient.png); 

/* Chrome, Safari */ 
background: -webkit-radial-gradient(circle, #352e24, #1a160d); 

/* Firefox 15 and older, Firefox for Android */ 
background: -moz-radial-gradient(circle, #352e24, #1a160d); 

/* Opera 11.6 (older only supported linear), Opera 12.0, Opera Mobile 12.0 */ 
background: -o-radial-gradient(circle, #352e24, #1a160d); 

/* standard syntax, IE10, Firefox 16+, Opera 12.1+ */ 
background: radial-gradient(circle, #352e24, #1a160d); 
+0

가? http://css3pie.com/ –

+0

http://css3pie.com/ 사이트에 예 (Yes)가 있지만 개인적으로 사용한 적이 없으므로 실제적으로 어떻게 작동하는지 모르겠습니다. – Ana

관련 문제