ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 の新しい背景属性とは何ですか?

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

青灯夜游
青灯夜游オリジナル
2022-02-25 18:32:093502ブラウズ

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。