html - 使用 webkit-image-set 时如何为非 WebKit 浏览器显示替代内容？

Question

我正在使用 webkit-image-set 使我的图像对于使用 Retina 显示器的用户来说看起来非常漂亮。

由于此 CSS 选择器不适用于 img 标签，我有一些 HTML 和 CSS 看起来像这样(在 Apple 的 WWDC 2012 session 上展示):

<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 UA 将忽略第二个声明，而 WebKit 将忽略第一个，因为第二个会覆盖它。