背景画像だけの指定だと、文字が読めなくなる場合がある
ボックスの背景に画像を表示させている場合、背景色の指定を省略していませんか？ 背景に画像を使う場合には、同時に「背景色」も指定しておきましょう。 そうしないと、次の問題が起こる可能性があります。
- 背景画像が表示されなければ……
→ 文字が読めなくなる可能性がある - 背景画像の表示が遅ければ……
→ 文字が読めるようになるまでに時間がかかる可能性がある
具体的にどういうことなのか、以下に例を使ってご紹介いたします。
背景に画像を使ったボックスの例
以下は、黒板（背景が緑色）の画像を表示させ、その上に白色の文字列を表示させた例です。
※スタイルシートが無効だと背景画像は表示されません。
上記のように背景画像が表示されれば、文字列は問題なく読めますね。
では、背景画像が表示されなかった場合はどうでしょうか。
以下は、背景画像が表示されなくて、背景色の指定もない場合の表示例です。
上記のように、文字列は読めなくなってしまいます。背景色が白色で文字色も白色なら当然ですね。
※上記の例では、説明のために枠線を付加して、文字に薄く色を付けています。実際には何も見えなくなるでしょう。
こうなることを防ぐには、背景画像のほかに、背景画像と同じような色で背景色も指定しておきます。
もし、背景色も指定してあれば、背景画像が表示されなくても、以下のように表示されるでしょう。
上記では、背景画像と同じような色（#009b47）を背景色として指定してあります。 そのため、背景画像が表示されなくても、文字は問題なく読めます。
背景画像と背景色を同時に指定する
スタイルシートでは、背景画像は background-imageプロパティを用いて指定します。 背景色は background-colorプロパティを用いて指定します。 これらは両方同時に記述できますから、以下のような感じで記述すると良いでしょう。
background-image: url("blackboard.gif");
background-color: #009b47;
/* 文字色 */
color: white;
背景画像と背景色はセットで指定
背景画像を指定するときには、常に背景色も同時に指定するようにしておきましょう。
最終的に問題なく画像が表示されるとしても、背景色の指定がなければ、画像の読み込みが完了するまで文字列が読めない状態になってしまいます。
ですから、背景色を指定しておくことは、閲覧者が早く読み始められるようにするためにも役立ちます。
【関連記事】
