Question

我有多个带渐变的背景，适用于Firefox，Chrome和Safari，还有移动设备的某些媒体查询。

像往常一样，问题是Internet Explorer。我以前有一个IE的条件样式表，我只加载了一个背景图像，但据我所知，IE10不支持＆lt; ！ - 如果IE - ＆gt;在我的CSS中。

理想情况下，我想在所有浏览器上使用css3渐变和单独的背景图像，我很乐意为所有IE浏览器使用单个背景图像，但到目前为止，单个背景图像不适用于IE。 / p>

主要style.css中的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;}

Internet Explorer的CSS：style-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;  
}

Answer 1

问题在于，您只为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

IE10的背景图像和渐变

1 个答案: