使用webkit-image-set时,如何为非WebKit浏览器提供备用内容？

Question

我正在使用webkit-image-set来使我的图像对于使用Retina显示屏的用户来说看起来很漂亮.

由于这个CSS选择器不适用于img标签,我有一些看起来像这样的HTML和CSS(如Apple的WWDC 2012会话中所示):

<div id="iconImage">
</div>

div#iconImage {
width:152px;
height:152px;
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url(WebsiteIcon@2x.png) 2x);
background-size: 152px 152px;
margin-left:auto;
margin-right:auto;
}

我的Retina MacBook Pro看起来很棒!当然,不是在我使用Firefox时:它只是一个空白点,正如我所期待的那样.我确信它在IE浏览器中也没有显示任何内容.也不是很容易接近.

那么,我可以添加到上面的代码中:

1. 显示图像(可能是低分辨率版本)
2. 也许某种文字或替代文字或其他东西,以便让受影响的访客更容易接近.

Answer 1

你不能为CSS背景做替换文字(尤其是因为背景不应该用于语义上有意义的图像),但做后备背景很容易:

background-image: url(whatever);
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url(WebsiteIcon@2x.png) 2x);

非WebKit UAs将忽略第二个声明,而WebKit将忽略第一个声明,因为第二个声明会覆盖它.