CSS3の背景

CSS3の背景

CSS3は、より大きな制御背景要素を提供する、いくつかの新しい背景のプロパティが含まれています。

この章では、次の背景のプロパティについて説明します：

• 背景画像
• 背景サイズ
• 背景起源
• 背景クリップ

また、複数の背景画像を使用する方法を学習します。

ブラウザのサポート

表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。

すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。

CSS3のbackground-imageプロパティ

CSS3は、背景画像のプロパティを介して、背景画像を追加することができます。

異なる背景画像とカンマで区切られた画像は、すべての画像が最初の上部に表示されます。

あなたは別の画像に異なる特性の数を設定することができます

CSS3のbackground-sizeプロパティ

背景サイズは、背景画像のサイズを指定します。 CSS3前に、背景画像のサイズは、画像の実際のサイズによって決定されます。

CSS3は、背景画像を指定することができ、私たちは、異なる環境での背景画像のサイズを再指定することができます。 あなたはパーセンテージまたはピクセルサイズを指定することができます。

あなたは、サイズは親要素の割合の大きさの幅と高さを基準にして指定します。

例1

背景イメージをリセットします。

div要素
{
背景：のURL（img_flwr.gif）。
背景サイズ：80px 60PX;
背景リピート：なしリピート;
}

»をお試しください

例2

完全コンテンツ領域を埋めるために、背景画像をストレッチ：

div要素
{
背景：のURL（img_flwr.gif）。
背景サイズ：100％100％。
背景リピート：なしリピート;
}

»をお試しください

CSS3の背景-origin属性

背景-ORIGIN属性は、背景画像領域の位置を指定します。

コンテンツボックス、パディングボックス内に配置され、背景画像の境界ボックス領域できます。

例

コンテンツ・ボックスの背景画像を配置します：

div要素
{
背景：のURL（img_flwr.gif）。
背景リピート：なしリピート;
背景サイズ：100％100％。
背景の起源：コンテンツボックス。
}

»をお試しください

例

body要素内の2つの背景画像を設定します。

body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

»をお試しください

CSS3のbackground-クリッププロパティ

CSS3は、バックグラウンド・クリッププロパティの背景を指定した場所から描画を開始するように切断されます

新しい背景のプロパティ