画像置換-z-index

このエントリーをはてなブックマークに追加

z-indexを使用した画像置換テクニックです。

このテクニックの特筆すべき所は、『CSSがONで画像がOFFの際に何も表示されない』という画像置換の欠点を克服している所にあります。

どのような手法かというと(X)HTMLは以下のようになります。

<p><em>とあるWEBクリエイターのblog</em></p>

画像で表示、つまり、目立たされる為に画像に置き換える為、em要素で包み込む。
em要素はそれ自体では意味を成さない為、ブロックレベル要素(この場合はp要素)で包む。

ただ、マークアップの説明は後付けで、本当は置き換えたい文字を2つの要素で包めれば良いので、好みでマークアップしてください。

CSSは以下のようになります。

body{
	position:relative;
	z-index:1;
}
p {
	width:400px;
	height:50px;
	background:url("logo.gif") top left no-repeat;
}
p em{
	position:relative;
	z-index:-1;
}

注目するところはz-index:1をbody要素にしている所です。
emに記述されているz-index:-1;で、em要素に記述されている文章をbodyのより下に表示ることが可能になります。

サンプル

ただ、この手法

  • MacIEで画像が表示されない
  • 文字を拡大すると画像から文字が溢れる

といった問題点も満載です。

結論

画像置換のデメリットを克服しているとはいえ、他のデメリットが多すぎるテクニックです。表示媒体が限定されている場合などは使えるテクニックかも知れません。
(微妙かな・・・)

スポンサードリンク