Css

テキストをCSS画像に置き換える3つの方法（画像置換）



Replace Text With Css Picture Three Methods



訪問者にとっても検索エンジンにとっても、テキストはページコンテンツを表示するための最良の方法ですが、フォントなどの理由により、テキスト表示は徐々に美容デザイナーの要件を満たすことができなくなります。その結果、CSSによって実装された、テキストを画像に置き換える方法がありました。このようにして、ページにさまざまな効果をもたらすだけでなく、検索エンジンはテキストHTML、CSS、フルーツを無効にして検索できます。まだ表示されています。したがって、この記事では、Webページの設計者のお気に入りによって、いくつかの一般的なグラフィック置換テクノロジについて説明します。

  • ファーナー画像置換（FIR）
  • ファーク法
  • ギルダー/レビンの方法（推奨）

1.ファーナー画像置換（FIR）



これは最初に登場したグラフィック置換テクノロジーであり、Todd Fahrnerによって提示されたもので、非常に理解しやすいものです。

HTMLコード：



Hello World

CSSコード：

h2 { background:url(hello_world.gif) no-repeat width: 150px height: 35px } span { display: none }

コードは非常に明確です。最初にH2のコンテキストで使用される画像、次にSPANタグが非表示になります。しかし、このように問題があります。つまり、画像を表示できない場合、この領域は何にもつながりません。同時に、ディスプレイの使用：多くの主流のスクリーンリーダーで見落とされ、可用性の問題を引き起こすコンテンツを非表示にする方法はないため、可能であれば回避する必要があります。

2.ファーク法



この手法は、Mike Rundleの発明www.phark.netから作成されており、適切な画面イメージ読み取りセクションの置換手法を条件付けています。ラベルに追加の利点はありません。

HTMLコード：

Hello World

CSSコード：

h2 { text-indent: -5000px background:url(hello_world.gif) no-repeat width: 150px height:35px }

コードも非常に単純で、テキストのインデント、非表示のテキストを使用しますが、画像を表示できない場合でも、FIRの問題が存在します。

ブラウザのサポート：
Windows-IE 5.5以降、Netscape 7、Opera 6以降、FireFox
Mac --IE 5.2、Safari、FireFox。

3.ギルダー/レビン法

このテクノロジーは、TomGilderとLevinAlexanderが共同で提案したもので、おそらくグラフィックに代わる最も包括的なテクノロジーの1つです。

HTMLコード：

Hello World

CSSコード：

h2 { width: 150px height: 35px position: relative } h2 span { background: url(hello_world.gif) no-repeat position: absolute width: 100% height: 100% }

まず、位置H2が相対位置に設定されるため、H2 H2内に配置された要素が参照として配置され、SPAN要素が絶対位置に配置され、領域全体でH2がサポートされます。一方、SPAN内の背景画像はこのような方法を適用します。SPANタグの原則は上にオーバーレイされたテキストであり、SPANの背景の内側を表示できなくなると、下のレイヤーのテキストを表示しても通常の使用には影響しません。ただし、この方法には、背景画像を透明にできないという欠点もあります。そうしないと、下のテキストが表示されます。

ブラウザのサポート：
Windows-IE 5.5以降、Netscape 7、Opera 6以降、FireFox
Mac --IE 5.2、Safari、FireFox。