loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > 【CSS】リストメニューの背景画像が透明になってしまう怪現象
この記事は約2分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2010.11.13

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

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

どうして?

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

実は簡単なことだった

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

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

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

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

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

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

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

区切り画像

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

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

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

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

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

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

list-toumei(new).png

 

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

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

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

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「FOCUS (TCD030)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

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

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

先頭へ