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

Total 118 views
この記事の所要時間は約 2分です。

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

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

どうして?

スポンサーリンク


 

イメージ画像

 

本来なら下の Sample のように表示されるべきなんです。
よく見かけるスプライト CSSを使用した画像リストです。

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

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

隅から隅までチェックしてもどこにもミスはありません。(先入観ってコワい)
ただ透明なだけでリンクも機能します。

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

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

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

区切り画像

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

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

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

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

通常の画像の読み込みであれば「( )」が付いたファイルの読み込みは問題ありません。
ちなみに背景画像として作った「list-toumei.png」に「( )」を付けた「list-toumei(new).png」を読み込んだ画像が下図です。

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

list-toumei(new).png

 

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

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

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

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)