CSS3 の新しい背景属性とは何ですか?

css3 には 3 つの新しい背景属性が追加されています: 1. オブジェクトの背景画像が外側に切り取られる領域を指定する、background-clip、2. 背景画像の開始位置を指定する、background-origin表示する; 3. 背景 -size、背景画像のサイズを指定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

#css3 の新しい背景属性

##AttributeDescriptionCSSbackground-clipオブジェクトの背景画像を外側に切り取る領域を指定します。 3background-originbackground-position を計算する際に、オブジェクトの背景画像の基準原点 (位置) を設定または取得します。 3background-sizeオブジェクトの背景画像のサイズを取得または設定します。 31.background-size: 背景画像のサイズを指定します

CSS3 より前では、背景画像 サイズは画像の実際のサイズによって決まります。 CSS3では背景画像のサイズを指定できるため、さまざまな環境で背景画像を再利用することができます。寸法はピクセルまたはパーセンテージで指定できます。寸法がパーセンテージとして指定されている場合、寸法は親要素の幅と高さを基準とします。

div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

2.background-origin: 背景画像の表示を開始する位置を指定します。

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

div{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

3.background-clip: 背景画像のトリミングを開始する位置を指定します

div{
background-color:yellow;
background-clip:content-box;
}

(学習ビデオ共有: css ビデオ チュートリアル

,

Web フロントエンド入門チュートリアル )

以上がCSS3 の新しい背景属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。