1

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

像往常一样，问题是 Internet Explorer。我曾经有一个 IE 的条件样式表，我只加载了一个背景图像，但据我所知，IE10 在我的 CSS 中不支持 < !--If IE--> 。

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

主 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;  
}
4

1 回答 1

0

问题是您只为 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-14T07:08:48.337 回答