CSSの複数の背景
この章では、1つの要素に複数の背景画像を追加する方法を学習します。
また、次のプロパティについても学習します。
background-size
background-origin
background-clip
CSSの複数の背景
CSSを使用すると、プロパティを使用して、要素に複数の背景画像を追加できます
background-image
。
さまざまな背景画像はコンマで区切られ、画像は互いに積み重ねられ、最初の画像が視聴者に最も近くなります。
次の例には2つの背景画像があります。最初の画像は花(下と右に配置)で、2番目の画像は紙の背景(左上隅に配置)です。
例
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
複数の背景画像は、個々の背景プロパティ(上記のように)またはbackground
省略形プロパティのいずれかを使用して指定できます。
次の例では、background
省略形のプロパティを使用しています(上記の例と同じ結果)。
例
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
CSSの背景サイズ
CSSbackground-size
プロパティを使用すると、背景画像のサイズを指定できます。
サイズは、長さ、パーセンテージ、または2つのキーワード(containまたはcover)のいずれかを使用して指定できます。
次の例では、背景画像のサイズを元の画像よりもはるかに小さくします(ピクセルを使用)。
痛みを彼に感謝します
痛み自体は愛です
だからこそ、私たちの通常の慣行が結果を利用するために耐えるのは、ほんの少しでも来るのです
コードは次のとおりです。
例
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
のその他の2つの可能な値background-size
はcontain
、およびcover
です。
contain
キーワードは、背景画像を可能な限り大きくするように拡大縮小します(ただし、幅と高さの両方がコンテンツ領域内に収まる必要があります)。そのため、背景画像と背景測位領域の比率によっては、背景画像で覆われていない領域が存在する場合があります。
キーワードはcover
、コンテンツ領域が背景画像で完全に覆われるように背景画像を拡大縮小します(幅と高さの両方がコンテンツ領域以上になります)。そのため、背景画像の一部が背景測位エリアに表示されない場合があります。
次の例は、contain
との使用法を示していcover
ます。
例
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
複数の背景画像のサイズを定義する
複数のbackground-size
背景を操作する場合、プロパティは(コンマ区切りのリストを使用して)背景サイズの複数の値も受け入れます。
次の例では、3つの背景画像が指定されており、画像ごとに異なる背景サイズの値が設定されています。
例
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
フルサイズの背景画像
次に、ブラウザウィンドウ全体を常にカバーする背景画像をWebサイトに表示します。
要件は次のとおりです。
- ページ全体を画像で埋めます(空白なし)
- 必要に応じて画像を拡大縮小する
- ページの中央の画像
- スクロールバーを発生させないでください
次の例は、その方法を示しています。<html>要素を使用します(<html>要素は常に少なくともブラウザウィンドウの高さです)。次に、固定された中央の背景を設定します。次に、background-sizeプロパティを使用してサイズを調整します。
例
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
ヒーロー画像
<div>でさまざまな背景プロパティを使用して、ヒーロー画像(テキスト付きの大きな画像)を作成し、必要な場所に配置することもできます。
例
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
CSS背景-起源プロパティ
CSSbackground-origin
プロパティは、背景画像の配置場所を指定します。
プロパティは3つの異なる値を取ります。
- border-box-背景画像は境界線の左上隅から始まります
- padding-box-(デフォルト)背景画像は、パディングエッジの左上隅から始まります
- content-box-背景画像はコンテンツの左上隅から始まります
次の例は、background-origin
プロパティを示しています。
例
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSSのbackground-clipプロパティ
CSSbackground-clip
プロパティは、背景のペイント領域を指定します。
プロパティは3つの異なる値を取ります。
- border-box-(デフォルト)背景は境界線の外側の端にペイントされます
- パディングボックス-背景はパディングの外側の端にペイントされます
- content-box-背景はコンテンツボックス内にペイントされます
次の例は、background-clip
プロパティを示しています。
例
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
CSSの高度な背景プロパティ
Property | Description |
---|---|
background | A shorthand property for setting all the background properties in one declaration |
background-clip | Specifies the painting area of the background |
background-image | Specifies one or more background images for an element |
background-origin | Specifies where the background image(s) is/are positioned |
background-size | Specifies the size of the background image(s) |