1

私はこれを思いついたばかりです、それはすべての現代のブラウザで動作するようです、私はそれをテストしました（IE8 /互換性、Chrome、Safari、Moz）

HTML

<img id="my_image" alt="my text" src="images/small_transparent.gif" />

CSS

#my_image{
  background-image:url('images/my_image.png');
  width:100px;
  height:100px;}

プロの：

  • 画像の代替テキストがベストプラクティスです-アクセシビリティ/seoの実践
  • 余分なHTMLマークアップはなく、cssも非常に最小限です。
  • 「テキストインデント」技術が低帯域幅のユーザーからテキストを隠すCSSオン/画像オフの問題を回避します

私が考えることができる最大の欠点は、透明なgifのみを送信するため、css off /imagesonの状況です。

スタイルシートのない画像を使用しているのは誰ですか？ある種の携帯電話か何か？

私はオーストラリアの地方（最寄りの都市から数百キロ）のクライアント向けにいくつかのサイトを作成しています。このサイトでは、多くのユーザーがダイヤルアップ接続に悩まされ、多くの場合古いブラウザも使用されるため、「画像オフ」の問題は重要な考慮事項です。 。

私が考慮していないこのテクニックのその他の副作用はありますか？

編集：通常の画像タグにこれを使用する追加情報を追加したかっただけです。

A.css-spritesを使用できます

B.単一の配列を使用して異なるサブドメイン間で背景画像ソースを交互にするphpでcssを生成できます

C.画像のサイズを変更しても、画像が伸びたり歪んだりしないので、ページ上の他のすべての画像と同じように動作するのが好きです。

4

3 に答える 3

3

通常の画像タグの何が問題になっていますか？imgタグは、コンテンツに画像が含まれている場合に使用することを目的としており、CSSは実際のコンテンツに関与してはなりません。一方、プレゼンテーション画像は、divなどの背景画像として設定し、コンテンツや構造マークアップに干渉しないようにCSSを介して処理する必要があります。

そのようなことをする必要があるシナリオはありません。

CSSがオフのときに正常に機能が低下する画像置換テクノロジーが必要な場合は、古い忠実なテキストインデント手法を使用できます。

#element {
    width: 100px;
    height: 100px;
    background: image(pic.jpg);
    text-indent: -9999px;
}

<div id="element">This text will show if CSS is off, otherwise an image is displayed.</div>
于 2010-04-14T13:24:15.487 に答える
0

インデントは必要ないようですが、Tatuは正しいです。必要な画像をimgのsrcとして配置するだけです。次に、画像がオフのときにテキストを取得し（また、代替テキストはimgのCSSを使用してスタイル設定できることに注意してください）、画像がフェッチされているときに画像を表示します。

「画像置換方法」の重要な点は、見出しをスタイリングするときにalt属性からテキストを削除して、検索インデックスが正しく作成されるようにするためです。ただし、img自体は、CSSや追加のマークアップなしで機能します。

于 2010-04-14T16:47:37.107 に答える
0

クライアントが奇妙なフォントを必要とする場合、私はh1/h2タグでこの種の手法を使用します。これが私がそれを行う方法ですhttp://flowdev.tumblr.com/post/1187111884/the-power-of-h1-and-h2-tags

私の知る限り、すべてのブラウザで動作します。

于 2010-09-25T21:18:53.283 に答える