HOME > ウェブデザイン > 【CSS】リストメニューの背景画像が透明になってしまう怪現象
公開日:2010.11.13
この記事は約2分で読めます。

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

この記事は最終更新日から8年以上経過しているため現状にそぐわない可能性もあります。

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

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

ただ透明なだけ。

どうして?

SIRIUSレビューイメージ画像

実は簡単なことだった

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

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

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

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

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

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

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

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

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

解決策

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

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

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

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

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

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

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

list-toumei(new).png

 

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

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

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

以上です。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

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