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

私のRetinaMacBookProに似合います！もちろん、Firefoxを使用しているときではありません。予想どおり、これは単なる空白です。IEで表示しても、何も表示されないと思います。また、非常にアクセスしやすいものでもありません。

だから、私は上記のコードに何を追加して作ることができますか？

  1. 画像（おそらく低解像度バージョン）は
  2. 障害のある訪問者がもう少しアクセスしやすいように、ある種のテキストや代替テキストなどがあります。
4

2 に答える 2

7

CSS背景の代替テキストを実行することはできませんが（特に、意味的に意味のある画像に背景を使用するべきではないため）、フォールバック背景を実行するのは簡単です。

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

非WebKitUAは2番目の宣言を無視しますが、WebKitは2番目の宣言をオーバーライドするため、最初の宣言を無視します。

于 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 に答える