多背景图像| Fallback for
问题描述:
我知道有很多关于背景图片的问题,但我正在寻找只使用背景图片之一的IE7,IE8回退。与其他人正在寻找的有点不同。多背景图像| Fallback for <IE9
background-color:#ebe2c2;
background-image:url('../images/bg-clouds.png'), url('../images/bg-main-repeat.jpg');
background-repeat:no-repeat, repeat;
background-position:center top, left top;
background-attachment:fixed, fixed;
我该如何获得只有“bg-main-repeat.jpg”及其所有属性才能应用?现在IE7/IE8只能回退到颜色。我可以使用不同的格式对代码进行格式化,以便现代浏览器同时应用背景图像,但较旧的仅应用一种。我不想添加更多的HTML,但如果这是唯一的方法,这是唯一的方法。
在此先感谢
答
您可以使用以下两种方法之一:
CSS “黑客”,迫使某些浏览器不同的行为
-
(好多了)使用内置在仅限Internet Explorer的条件语句中,如:
<!--[if lt IE 9]> <link REL="stylesheet" HREF="css/ie.css" TYPE="text/css"> <![endif] -->
为在Internet Explorer中呈现的页面指定不同的CSS。
答
你会这样做。
background:url('../images/bg-clouds.png') center top no-repeat fixed;
background:url('../images/bg-clouds.png') center top no-repeat fixed,
url('../images/bg-main-repeat.jpg') left top repeat fixed
;
background-color:#ebe2c2;
+0
我觉得'background-color'旧的解析器会忽略太多,因为它落在第二个“错误的”背景上,并继续解析下一个CSS元素。 – nk9
答
我曾经使用条件样式,但它更方便地使用浏览器特定HTML类,可以让你只用一个样式表写的浏览器特定的CSS。
代替您的标准HTML开放标记和下列:
<!--[if IE 7]><html class="lt-ie8 lt-ie9 lt-ie10 ie7"><![endif]-->
<!--[if IE 8]><html class="lt-ie9 lt-ie10 ie8"><![endif]-->
<!--[if IE 9]><html class="lt-ie10 ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
这里是你的CSS:
/* default css */
.element {
background-color:#ebe2c2;
background-image:url('../images/bg-clouds.png'), url('../images/bg-main-repeat.jpg');
background-repeat:no-repeat, repeat;
background-position:center top, left top;
background-attachment:fixed, fixed;
}
/* conditional css */
.lt-ie9 .element {
background-color:#ebe2c2;
background-image:url('../images/bg-main-repeat.jpg');
background-repeat:repeat;
background-position:left top;
background-attachment:fixed;
}
哎呀,我最初写于所有IE浏览器上使用。更新与正确的条件声明... –
我希望不诉诸于此,但谢谢。 –
我也不在乎这么做,但在我看来,它使整体代码更清晰,并且不需要使用不受支持的“技巧”。 –