CSS3の背景
CSS3は、背景要素のより大きな制御を可能にするいくつかの新しい背景のプロパティが含まれています。
この章では、一つの要素に複数の背景画像を追加する方法を学習します。
また、次の新しいCSS3プロパティについて説明します：
-
background-size -
background-origin -
background-clip
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
続いて数字-webkit-, -moz- 、または-o-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3複数の背景
CSS3は、あなたが通って、要素の複数の背景画像を追加することができますbackground-imageプロパティ。
異なる背景画像は、コンマで区切られており、画像が最初の画像が観察者に最も近い場合、互いの上に積層されています。
次の例では、最初の画像は、花（右下に整列して）であり、第二の画像は、紙の背景（左上隅に位置合わせ）で、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;
} »それを自分で試してみてください CSS3の背景サイズ
CSS3 background-sizeプロパティを使用すると、背景画像のサイズを指定することができます。
CSS3の前に、背景画像のサイズは、画像の実際のサイズでした。 CSS3は、異なるコンテキストで私たちは再利用背景画像にできます。
含まれているか、カバー：サイズは長さ、パーセントで、または2のいずれかのキーワードを使用して指定することができます。
以下の例は、（ピクセルを使用して）元の画像よりもはるかに小さいと、背景画像のサイズを変更します。
オリジナルの背景画像：
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
リサイズの背景画像：
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
ここでは、コードは次のとおりです。
例
#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つの背景画像が異なると、指定したbackground-size各画像の値：
例
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} »それを自分で試してみてください フルサイズの背景画像
今、私たちはすべての回でブラウザのウィンドウ全体をカバーするウェブサイト上で背景イメージを持っていると思います。
次のような要件は以下のとおりです。
- 画像（空白スペースなし）でページ全体を埋めます
- 必要に応じてスケール画像
- ページのセンターの画像
- スクロールバーを引き起こしません
次の例では、それを行う方法を示しています。 （html要素は、常にブラウザウィンドウの少なくとも高さ）html要素を使用します。 そして、その上に固定され、中心に背景を設定。 その後で、そのサイズを調整background-sizeプロパティ：
例
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} »それを自分で試してみてください CSS3 background-originプロパティ
CSS3 background-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;
}
»それを自分で試してみてください CSS3 background-clipプロパティ
CSS3 background-clipプロパティは、背景の絵の領域を指定します。
プロパティには、3つの異なる値をとります。
- border-box - （デフォルト）背景が境界線の外側の縁に描かれています
- padding-box -背景はパディングの外側エッジに描かれています
- content-box -背景にはコンテンツボックス内に描かれています
次の例は示してbackground-clipプロパティを：
例
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
»それを自分で試してみてください 練習で自分自身をテスト！
CSS3の背景のプロパティ
| プロパティ | 説明 |
|---|---|
| background | 1宣言内のすべてのバックグラウンドプロパティを設定するための簡略記述特性 |
| background-clip | 背景の絵の領域を指定します |
| background-image | 要素のための1つまたは複数の背景画像を指定します |
| background-origin | 背景イメージ（複数可）/配置されている場所を指定します |
| background-size | 背景画像（複数）のサイズを指定 |