【CSS】リストメニューの背景画像が透明になってしまう怪現象

ブログを少し手直ししようといろいろいじくっていたら何故か背景を指定したリストメニューが表示されなくなってしまったんです。

マウスを合わせると指マークにもなるしリンクも機能しています。

ただ透明なだけ。

どうして？

実は簡単なことだった

本来なら下のSampl のように表示されるべきなんです。

よく見かけるスプライトCSSを使用した画像リストです。

ところがどこでどう間違ったのか、いつの間にか下のように完全に透明になってしまったんです。

背景画像もきちんとアップしているし、リスト部にマウスオーバーさせると指マークも出ますでしょ。

隅から隅までチェックしてもどこにもミスはありません。（先入観ってコワい）

ただ透明なだけでリンクも機能します。

こうなると全くお手上げ。

確か前にもこんなことがあったような気がするんですが、一向に解決策が思い出せないんです。

こんな時はいったん作業をやめて食事をしたり寝たりテレビを見たりと何か別のことをやるに限ります。

解決策

気分もすっきりしたところであらためてCSSを眺めていたら「ん？ここかな？」と気がついたところがありました。

リストには”background”で背景画像を指定しているんですがそのファイル名が「list-toumei(new).png」となっています。

オリジナルの「list-toumei.png」を残しておくべく何らかの理由で半角カッコ「( )」をつけて別ファイル名で書き出したものでした。

その「( )」をなにげにアンダーバー( _ )に変えてみたところ…無事に背景画像が表示されたんですよ。

通常の画像の読み込みであれば「( )」が付いたファイルの読み込みは問題ありません。

ちなみに背景画像として作った「list-toumei.png」に「( )」を付けた「list-toumei(new).png」を読み込んだ画像が下図です。

ちゃんと見えてますよね。

 

でもCSSでの読み込みファイル名に「( )」を使用すると背景が表示されないという状況が発生するんです。

これはCSSの仕様なんでしょうかね。

なんとなく無意識にファイル名に「( )」を使ってしまっていたため原因がつかめないでいたんですが、大概のミスはこうして一度頭を休ませてやると発見できるものです。

以上です。