複数の画像を配置する


bodyのbackgroundへ複数の画像を貼り付けてみましょう。

背景に画像を複数枚貼り付ける。

スタイルシートのソースは、こういう書き方になります。

cssソース

/*====参考====*/
body {
    background: url("./images/s256_f_health_11_0bg.png") no-repeat 53% 180px,     /*1枚目の画像*/
    url("./images/s256_f_health_11_0bg.png") no-repeat 50% 140px,     /*2枚目の画像*/
    url("./images/s256_f_health_36_0bg.png") no-repeat 47% 100px;     /*3枚目の画像*/
}

それでは見ていきましょう。

画像を1枚、2枚、3枚、合計3枚の画像を配置しました。

1枚目の画像の後ろは,になっています。

2枚目の画像の後ろも,になっています。

画像1枚目と2枚目と3枚目は,を介して繋がっています。
,で何枚でも繋げることができます。

3枚目は最後の画像なので;で終わっています。

さて、1枚目の画像はno-repeat 53% 100px, で終わっていますがこれは、繰り返しなし、左から幅の53%上から100pxの位置に画像を配置しなさい、という指定になります。

2枚目の画像はno-repeat 50% 100px, で終わっており、1枚目と同じく繰り返しなし、左から幅の50%上から100pxの位置に画像を配置しなさい、という指定になります。

3枚目の画像はno-repeat 47% 100px; で終わっており、1、2枚目と同じく繰り返しなし、左から幅の47%上から100pxの位置に画像を配置しなさい、という指定になります。

画像2枚を同じ画像にして、3枚重なった配置にしました。
よく見ると、1枚目に書いた画像が上、2枚目に書いた画像が真ん中、3枚目に書いた画像が一番下になって表示されます。

順番を間違えないようにしましょう。

次は画像にグラデーションをかける

  1. 背景に色を付ける
  2. 背景にグラデーションをかける
  3. 画像をタイル状に配置する
  4. 画像を1枚表示する
  5. 画像で横ラインを引く
  6. 画像で縦ラインを引く
  7. 複数の画像を配置する
  8. 画像にグラデーションをかける