CSS3 背景_html/css_WEB-ITnose

概要

CSS3 には、背景をより詳細に制御できるいくつかの新しい背景プロパティが含まれています。

新しい属性

• background-size: 背景画像のサイズを指定します。

• background-origin: 背景画像の配置領域を指定します。

• background-clip: 背景の描画領域を指定します。

ブラウザのサポート

Internet Explorer 9 以降、Firefox、Chrome、Safari、Opera は、新しい背景属性をサポートします。

背景サイズ

background-size 属性は、背景画像のサイズを指定します。

そうです

背景サイズを設定するには4つの方法があります

数値定義

背景画像の高さと幅を設定します。

最初の値は幅を設定し、2 番目の値は高さを設定します。

値が 1 つだけ設定されている場合、2 番目の値は auto に設定されます。

パーセンテージ

背景画像の幅と高さを親要素のパーセンテージとして設定します。

最初の値は幅を設定し、2 番目の値は高さを設定します。

値が 1 つだけ設定されている場合、2 番目の値は auto に設定されます。

cover

背景画像が背景領域を完全に覆うように、背景画像を十分に大きくします。

これは、background-size: 100% auto;

背景画像の一部が背景配置領域に表示されない場合があります。

contain

背景画像を最大サイズまで拡大し、幅と高さがコンテンツ領域に完全に収まるようにします。

背景画像を最大にしますが、背景領域を超えないようにします。これは次の状況に相当します。

• 背景領域が高さよりも広い場合は、background-size: auto 100% と同等です。

• 幅よりも高い背景領域のサイズが、background-size: 100% auto;

次の図は、さまざまな属性値の影響を示しています。

背景画像配置領域

background-origin 属性は、background-position 属性が配置される相対的な位置を指定します。

背景画像は、コンテンツ ボックス、パディング ボックス、またはボーダー ボックス領域に配置できます。

配置エリアはデフォルトでパディングボックス内にあります

複数の背景画像

CSS3 では要素に複数の背景画像を使用できます。

body{    background: url('bg_flower.gif');    background-size: 63px 100px;    background-repeat: no-repeat;    padding-top: 80px;}

各画像は異なる属性を使用することもできます。

div {    background: url('bg_flower.gif');    background-repeat: no-repeat;    background-size:100% 100%;    background-origin:content-box;}

背景色描画領域

background-clip属性で背景色描画領域を指定します。背景元の属性値と同じ。

りー