画像をCSS側に記述するテク – イケサイウェブ制作lab

Bob Image Replacement 略してBIRというテクニックらしいですが、ネーミングがイマイチ。でもこれは結構画期的な裏テクです。
ちょっと昔まではCSS側に画像を指定してHTML側にテキストを記述するって技が流行ったけど、アクセシビリティー的にはよろしくない（画像OFFの時に何も表示されなくなる）との事で今は廃れていました。だけどこのBIRテクを使うと画像がOFFでもテキストはちゃんとブラウザに表示されます。もちろん画像の記述はCSSに書いている。
以下、引用ソース

<style type="text/css">
 body {
  background:#d3d3d3;
  position:relative;
  z-index:1;
 } 

 .bir {
  background:transparent url('image.jpg') top left no-repeat;
  height:100px;
  width:400px;
 } 

 .bir span {
  position:relative;
  z-index:-1;
 }
 </style>
</head>
<body>
 <h1 class="bir"><span>Top-Level Text</span></h1>

引用元：One Web Developer’s Haven >> Blog Archive >> BIR

このBIRは素晴らしいテクニックなんだけど一つだけ問題があるんです。MacIEだと画像が表示されない。。。現状はMacIE対応がまだまだ存在するので、このテクを使うならMacIE非対応のときかMacIEだけ画像OFF時のテキスト表示をあきらめるかのどっちかになる。
まぁそこまでしてCSS側に持ってこなくてもいいって話なんだけど。。。
しかもこのテクのキモはbodyに入ってるz-index、あんまりbodyにz-indexはいれたくないしね。
ま、状況に応じて使うって感じだな〜

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル