4

我正在使用 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. 可能是某种文本或替代文本或其他内容，以便残障访问者更容易访问它。
4

2 回答 2

7

你不能为 CSS 背景做 alt 文本（尤其是因为背景不应该用于语义上有意义的图像），但做后备背景很容易：

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

非 WebKit UA 将忽略第二个声明，而 WebKit 将忽略第一个，因为第二个会覆盖它。

于 2012-10-16T04:30:27.307 回答
1

也许您可以创建另一个专门为非 webkit 浏览器制作的类。

div#iconImage.nonWebkit {
    background-image: url(WebsiteIconNonWebkit.png);
}

然后使用jQuery检测非Webkit浏览器

if (!$.browser.webkit) {
    $('#iconImage').addClass('nonWebkit');
}
于 2012-10-16T03:51:32.020 回答