CSS複数の背景
この章では、複数の背景画像を 1 つの要素に追加する方法を学習します。
次のプロパティについても学習します。
background-sizebackground-originbackground-clip
CSS複数の背景
CSSでは、background-imageプロパティを使用して、要素に複数の背景画像を追加できます。
異なる背景画像はコンマで区切られ、画像が互いに積み重ねられ、最初の画像が視聴者に最も近くなります。
次の例には2つの背景画像があります。最初の画像は花(右下に配置)で、2 番目の画像は紙の背景(左上隅に配置)です。
例
複数の背景イメージは、個別のbackground(上記のとおり) またはbackgroundの短縮プロパティのいずれかを使用して指定できます。
次の例では、backgroundの短縮プロパティを使用しています(上記の例と同じ結果)。
例
CSS背景サイズ
CSSのbackground-sizeプロパティを使用すると、背景画像のサイズを指定できます。
サイズは、長さ、パーセンテージで指定するか、containまたはcoverの2つのキーワードのいずれかを使用して指定できます。
次の例では、背景画像のサイズを元の画像よりもかなり小さくします(pxを使用):
Lorem Ipsum Dolor
Lorem ipsum pain sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
コードは次のとおりです。
例
background-sizeに使用できる他の2つの値は、containとcoverです。
containキーワードは、背景画像を可能な限り大きくします (ただし、幅と高さの両方がコンテンツ領域内に収まる必要があります)。したがって、背景画像と背景配置領域の比率によっては、背景画像によってカバーされない背景領域が存在する場合があります。
coverキーワードは、コンテンツ領域が背景画像で完全に覆われるように背景画像を拡大縮小します (幅と高さの両方がコンテンツ領域以上になります)。そのため、背景イメージの一部が背景配置領域に表示されない場合があります。
次の例は、containとcoverの使用法を示しています。
例
複数の背景画像のサイズを定義する
background-sizeプロパティは、複数の背景を操作する場合、背景サイズの複数の値(コンマ区切りのリストを使用)も受け入れます。
次の例では、3つの背景画像が指定されており、画像ごとに異なるbackground-size値が指定されています。
例
フルサイズの背景画像
ここで、常にブラウザーウィンドウ全体を覆うWebサイトの背景画像を作成したいと思います。
要件は次のとおりです。
- ページ全体を画像で埋める(余白なし)
- 必要に応じて画像をスケーリング
- ページの中央に画像
- スクロールバーを発生させない
次の例は、その方法を示しています。 <html>要素を使用します(<html>要素は常に少なくともブラウザーウィンドウの高さです)。次に、その上に固定された中央の背景を設定します。次に、background-sizeプロパティでサイズを調整します。
ヒーロー画像
<div>でさまざまな背景プロパティを使用して、ヒーロー画像(テキストを含む大きなイメージ)を作成し、必要な場所に配置することもできます。
例
CSSのbackground-originプロパティ
CSSのbackground-originプロパティは、背景画像が配置される場所を指定します。
このプロパティは、次の3つの異なる値を取ります。
- border-box - 背景画像は境界線の左上隅から始まります
- padding-box - (デフォルト)背景画像はパディング角の左上隅から始まります
- content-box - 背景画像はコンテンツの左上隅から始まります
次の例は、background-originプロパティを示しています。
例
CSSのbackground-clipプロパティ
CSSのbackground-clipプロパティは、背景の描画領域を指定します。
このプロパティは、次の3つの異なる値を取ります。
- border-box - (デフォルト)背景は境界線の外側の端にペイントされます
- padding-box - 背景はパディングの外側の端にペイントされます
- content-box - 背景はコンテンツボックス内に描画されます
次の例は、background-clipプロパティを示しています。
例
CSSの高度なbackgroundプロパティ
|
プロパティ |
説明 |
|---|---|
| background | 1つの宣言ですべてのbackgroundプロパティを設定するための簡略プロパティ |
| background-clip | 背景の描画領域を指定します |
| background-image | 要素の1つまたは複数の背景画像を指定します |
| background-origin | 背景画像を配置する場所を指定します |
| background-size | 背景画像のサイズを指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。