もりげのどうかと思うような日記

▼ 背景画像でテキストを消す話

ちょっと思い立って(X)HTMLを勉強中だったり。まったく知識のない状態から学びはじめたので、新鮮な気分ではある。

デザイン上、h1要素の文字を、後の要素の背景画像で塗りつぶすということを試みる。「背景画像でタイトル」という奴ですな。だが、IE6では消えるのにOperaその他でうまく消えてくれない症状に直面した。

で、いろいろやってみてわかったのが、背景画像を設定する要素には、 position; relative; なり、 position: absolute; なりを指定しないと、先の文字の方が上に表示されてしまうらしいということ。なんでなのかはよくわからないので誰か教えてください。

しかし、目指しているデザインは、 Googleキャッシュで崩れない、というものなので、 position: absolute; は基本的に使えない。そしてMacIE5を考えると、 position: relative; で負の値を指定することは避けなければならない、らしい。困った。

で結局、仕方がないので、div要素を増やしてそちらに負の margin を指定、その中に入れたdl要素に position: relative; だけ指定して背景画像を置いてみた。これでめでたく文字は消える。

えーと、やってることは間違ってませんよね？　たぶん。初心者もいいところなので、暗中模索といった気分。