IE10的背景圖像和漸變

我有多個具有漸變背景，並且適用於Firefox，Chrome和Safari，以及移動設備的某些媒體查詢。IE10的背景圖像和漸變

像往常一樣，問題是Internet Explorer。我曾經有一個IE的條件樣式表，我只是加載了一個單一的背景圖像，但據我所知，IE10不會支持<！ - 如果IE - >在我的CSS中。

理想情況下，我想獲得css3漸變和獨立的背景圖像，適用於所有瀏覽器，我很樂意爲所有IE瀏覽器使用單一背景圖像，但迄今爲止單一背景圖像不適用於IE。

CSS中主要的style.css

body{ 
    font:14px 'questrialregular', Arial, Helvetica, sans-serif; 
    margin:0; 
    width:100%; 
    color:#797979; 

    background-image: 
    url(../img/bknd_img1.png), 
    url(../img/bknd_img2.png), 
    url(../img/bknd_img3.png), 
    url(../img/bknd_img4.png), 
    url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb)); 

    background-image: 
    url(../img/bknd_img1.png), 
    url(../img/bknd_img2.png), 
    url(../img/bknd_img3.png), 
    url(../img/bknd_img4.png), 
    url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb); 

    background-attachment:fixed; 
    background-position:top right, top left, center bottom, bottom right, left bottom; 
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; 
    background-color:#509deb; 
    display:block;}

CSS的Internet Explorer：風格ie.css

font:14px 'questrialregular', Arial, Helvetica, sans-serif; 
    margin:0; 
    width:100%; 
    color:#797979; 

    background-image: url('img/bknd_full_img.jpg'); 
    background-attachment:fixed; 
    background-position:center top; 
    background-repeat: no-repeat; 
    background-color:#fff; 
    display:block; 
}

來源

2012-11-27 conor909

的問題是，你只給梯度和多背景的WebKit（使用舊的語法）和Firefox（使用稍微更新的語法）。因爲您不提供它們的前綴或沒有前綴版本，所以IE或Opera無法顯示漸變或多個背景。

IE10使用最新和最終語法實現漸變，不帶前綴。最新的Opera也是如此，最近的Firefox也是如此。 IE10不需要您的條件註釋代碼，因爲它將以與其他瀏覽器相同的方式工作。

徑向梯度應成爲這樣的：所述語法變化

background-image: 
    url(../img/bknd_img1.png), 
    url(../img/bknd_img2.png), 
    url(../img/bknd_img3.png), 
    url(../img/bknd_img4.png), 
    url(../img/bknd_img5.png), 
    radial-gradient(circle closest-side at center, #c0deff, #509deb);

更多細節可在IE博客[0]和該規範中找到[1]

[0] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx， [1] http://dev.w3.org/csswg/css3-images/#radial-gradients

來源

2012-12-14 07:08:48

IE10的背景圖像和漸變

回答

相關問題