Webデザイン |
Lesson 4 | 背景画像の複数指定で 手軽にリッチなデザインに |
制作・文 | 山田敬美 | |||
> | To Use | CSS | ||
> | Browser | IE 9over | Firefox 3overSafari 4over |
CSS3では1つの要素に複数の背景画像を指定できるようになったため、無駄なdivを使わずに、背景画像をいくつも重ねるような複雑なデザインも手軽に再現できるようになった。 |
01
【1-1】この4つの画像を使用する
02
【2-1】div.background-imageにスタイルを指定する
【2-2】カンマ区切りで複数の背景画像を指定する
【2-3】4つの画像が重なって表示された
03
background-repeatで指定した値が背景画像の数より多い場合は超過分は無視され、少ない場合は背景画像の数と一致するまで指定が繰り返される【3-3】。
また、CSS3になって繰り返しを縦横個別に指定したり、spaceやroundといった 新しいキーワードでの指定もできるようになった(ただし2010年11月現在では対応しているブラウザは存在しない)。
【3-1】background-repeat: no-repeat, no-repeat, norepeat,no-repeat;と同じ扱いになる
【3-2】すべての背景画像が繰り返されなくなった
【3-3】このような指定の場合、background-repeat: no-repeat, repeat, no-repeat, repeat;となる
04
【4-1】4つの背景画像の位置をそれぞれカンマ区切りで指定
【4-2】それぞれのコーナーに背景画像が配置された
05
px や% による指定以外にも、auto/contain/coverなどのキーワードによる指定も追加された。containやcoverは元の画像の比率を保ったまま、画像の縦横のいずれかのサイズに合わせて、ボックスにピッタリ収まるように指定できる。
【5-1】4つの背景画像の位置をそれぞれカンマ区切りで指定。ベンダープレフィックスが必要だ
【5-2】背景画像のサイズが小さくなった
06
【6-1】
【6-2】グラデーションが未対応のブラウザ用に、background-colorの指定もしておくとよい
【6-3】透過した背景画像とグラデーションの組み合わせ