[CSS3]CSS3で背景画像を複数指定する!IE9以上

[CSS3]CSS3で背景画像を複数指定する!IE9以上

3歩進んで2歩下がる生活スタイルがすっかり定着の下山です。
マウスをカチカチやってるよりキーボードをパチパチやってるほうが好きです。(前フリ)

という訳で背景画像を3つの素材からCSSで作ってしまおうと・・・photoshopとか画像処理なんてしませんよ!

ご存知の通り、CSS3から1要素に複数の背景画像をしていできるようになりました。
例によってIE9以上です・・・(※確かCSS3をいくつかIE6~8でも有効にするCSS PIEてのがあります。)

demo

html

CSS

こんな感じで背景画像を複数指定できます。

backgroundプロパティに重ね順の上から指定していけばOKです。

今回はショートハンドプロパティで指定しましたけど、関連プロパティ個別指定ももちろんOKです。

こんな感じで。

これを使うと、例えばヘッダー背景がページの端から端まであってヘッダーより下の背景でパターンなんか指定する場合、普通にhtmlとCSS書けば問題ないんですが、CSSフレームワークとか使ってるとなかなか面倒なんですよね。(↓こんな感じのデザイン)
[CSS3]CSS3で背景画像を複数指定する!IE9以上

ヘッダー部分の背景とボディ部分の背景をまとめてbodyに指定しちゃえば早いじゃない?

なので次回はCSS PIEのことでも書きます。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク