CSS3背景位置決め原点background-origin_html/css_WEB-ITnose

背景の位置決め原点background-originはCSS3で新たに追加された背景に関する属性で、主に背景の開始原点位置を変更します。 CSS3 の背景位置決めの原点の背景背景には、border、padding、content の 3 つの属性値があります。以下にCSS3の背景配置の原点background-originを3つの属性値を中心に紹介します。

1. 背景起源の構文

1. 背景起源の構文

背景起源: パディングボックス || ボーダーボックス || コンテンツボックス

2.background-origin の属性値

(1)padding-box: この値は、background-origin のデフォルト値であり、background-position の開始位置を決定します。パディングの外側の端（ボーダーの内側の端）から背景画像を表示します

(2) border-box: この値は、background-position の開始位置を決定し、外側の端から背景画像を表示します。境界線の端 (3) content -box: この値は、コンテンツの外側の端 (パディングの内側の端) から背景画像を表示する背景位置の開始位置を決定します。 2. 背景元の互換性

1. 背景元の状況の互換性

2. 背景元の互換性のある記述方法

/*Gecko*/

-mo z-背景-原点: パディングボックス || コンテンツボックス; /*Webkit-background-origin: パディングボックス || コンテンツボックス;背景元: パディングボックス || コンテンツボックス; / *W3c 標準*/ 背景ボックス ||

3.背景元の例 (Google Chrome で効果をプレビュー)

1 、パディングボックス効果

CSS コード:

div {width:200px;height:200px;background:url(" http://www.leemagnum.com/img/logo.jpg") no -repeat;border:20pxソリッドrgba(0,0,0,0.3);padding:20px;

-webkit-background-origin:padding- box; /*これはデフォルトの位置です*/ }

プレビュー効果:

2. ボーダーボックス効果

CSSコード:

div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg" ) no-repeat;border:20px Solid rgba(0,0,0,0.3 );padding:20px;

-webkit-background-origin: border-box; }

HTML コード:

プレビュー効果:

3. コンテンツボックス効果

C SSコード:

div {幅:200px;高さ:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px ソリッド rgba(0,0,0,0.3);パディング:20px; -background-origin: content-box; }

HTML コード :

プレビュー効果:

背景の配置CSS3 の起源を紹介します。皆さんのお役に立てれば幸いです。 CSS3 に関する詳細については、Menglong Station の CSS3 アップデートに注目してください。長年にわたる Menglong Station のご支援に感謝いたします。