ホームページ > 記事 > ウェブフロントエンド > CSS3 の新しい背景属性とは何ですか?
css3 には 3 つの新しい背景属性が追加されています: 1. オブジェクトの背景画像が外側に切り取られる領域を指定する、background-clip、2. 背景画像の開始位置を指定する、background-origin表示する; 3. 背景 -size、背景画像のサイズを指定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
#css3 の新しい背景属性
CSS | background-clip | |
---|---|---|
3 | background-origin | |
3 | background-size | |
3 |
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 サイトの他の関連記事を参照してください。