1

Bootstrap で mixin を見たので、画像の置換やテクニックについて学びました。最近、何度か出てくるのを見たので、調べてみることにしました。私はこの記事を見つけましたが、大騒ぎが何であるかを理解していないことを告白します. 「置き換え」たいテキストに IMG タグを付けてみませんか?

4

1 に答える 1

5

OP がリンクしているページのように、CSS 画像置換のための 9 つのテクニックによると、画像置換を実装する際に考慮すべきいくつかの側面があります。一部のメソッドは他のメソッドよりも簡単で、ほとんどは実際にはグラフィカル ブラウザでしか機能しません。不要なマークアップなど、より抽象的な問題を抱えているメソッドもあります。

あなたが持っているのは、現実的なものの変種です

<h1 class="technique-ten">
  <img src="graphics/thetitle.png" alt="The Title" />
</h1>

これは CSS を必要とせず、基本的なものであり、多くの状況 (スクリーン リーダー、テキストのみのブラウザーなど) で機能しますが、SEO の目的には理想的ではありません。だからあなたは余分なテキストを追加します

<h1 class="technique-ten">
  The Title
  <img src="graphics/thetitle.png" alt="The Title" />
</h1>

このCSSで

.technique-ten {width:350px; height:75px;}
.technique-ten img {display:block; margin-top:-1.2em}

画像をテキストの上に配置しますが、余分なマークアップ ( 内のテキストh1とimg同じことを言う ) があり、画像が無効になっている場合は二重のテキストが表示されます。また、このjsfiddle
が示す ように、透明な領域のある画像は使用できません。テキストを非表示にする方法は SEO にも影響するため、テキストを非表示にすることは理想的なオプションではありません。

alt txt を空にすることができます。

<h1 class="technique-ten">
  The Title
  <img src="graphics/thetitle.png" alt="" />
</h1>

しかし、それは「二重テキスト」の問題を止めるだけで、他の問題は止めません。さらに、 にはimg意味的な意味がなくなります。

言い換えれば、はい、あなたの解決策にはメリットがありますが、同じ種類の問題があるため、そのページで既に言及されているものよりも必ずしも優れているとは限りません.

于 2013-06-23T06:57:03.517 に答える