CSS での背景属性の使用の概要

backgroundbackground 属性は CSS の重要な属性です。背景属性を使用すると、背景要素のさまざまなスタイルを設定できます。これには、塗りつぶされた背景の色の設定、独自の画像を背景として使用して、画像が要素全体を覆うまで水平方向と垂直方向に繰り返されるようにすること、および制御することが含まれます。要素内の背景画像の位置など。 Web ページのレイアウトでは、背景として画像を使用することがよくあります。通常、オブジェクトの画像を背景属性インスタンスとして設定すると、まず背景色が設定され、次に画像が背景として設定され、次に画像が繰り返されるかどうかが設定されます。オブジェクトの位置にある画像。前の背景色は設定する必要はなく、通常は画像をオブジェクトの背景として使用します。画像を繰り返し表示するかどうかを設定する場合は、距離位置を設定します。次のコンテンツでは、background 背景属性のさまざまな使用方法を具体的に説明します。

まず、php中国語ウェブサイトに関連する無料コースを学ぶことができます

1. 「CSS 0 基本入門チュートリアル」

の

CSS背景章コースを学びます。

2. 「Dark Horse Programmer CSS ビデオ チュートリアル」の 背景とマージン ビデオ コースをご覧ください CSS 知識 - 背景属性

本文の境界線を設定するとき, 境界線は本文のコンテンツのみを囲んでいることがわかります。ただし、本文の背景色を設定すると画面全体に表示されてしまいます。

画像を背景として使用する場合、画像は境界線で囲まれた部分ではなく、画面の表示領域を参照して配置されます。 各パラメータはスペースで区切られ、その後に色、画像、繰り返し、固定方法、位置が続きます。

2. CSS の背景関連属性

パーセント/長さ: パーセントの場合、背景画像のサイズはコンテナーとパーセントの積になります。 1 つだけを設定し、2 つ目は自動に設定します (元の背景画像と同じアスペクト比を維持するため)。 両方を 100% に設定すると、背景画像がコンテナーを埋め尽くしますが、アスペクト比が変わります。

contain: コンテナには、背景画像の固定比率に従って背景画像全体が含まれます。背景画像のサイズは、いずれかの側がコンテナの境界に達するまで、背景画像の固定比率に従って拡大され、多くの場合、もう一方の側は空白になります (リピートがない場合)。

カバー: 背景画像は、コンテナ全体を埋めるまで固定アスペクト比に従って拡大されます (背景画像の短い辺もコンテナの境界に達します)。背景画像がコンテナを超えてしまうため、一部が切れてしまいます。

3.

CSSのbackground属性の詳細説明

同じ要素内で、背景複合属性を先頭に記述し、個別に設定する必要があるbackground属性を最後に記述します。長江の前波が後ろ波を押し返し、前波は浜辺で消滅します 複数の背景画像を同じ要素に追加する場合、他の背景属性は個別にのみ記述でき、複合属性の略語は使用できません。

ネストされた親子要素では、同じ名前の属性を記述することはお勧めできません。理由: 子要素のサイズが親要素のサイズ以上である場合、親要素のスタイルは子要素によって上書きされます

実際の作業では、背景画像の使用量を減らし、背景画像の使用量を減らします。挿入された写真。

4.

CSS3の新しい背景シリーズ背景の詳細​​説明

border-box: 境界線を無視し、開始点0、0から直接タイリングを開始しますpadding-box: デフォルト値、パディングを無視して開始します。直接タイリング パディングの開始点 0,0 からタイリングを開始します。 Content-box: コンテンツ部分からタイリングを開始します。パディング位置は予約されます。パディングが影響します

5. WebページにCSS背景画像と背景色を設定する方法

ここでのCSS背景とは、WebページにCSSを介してさまざまな背景スタイルを設定するなど、CSSを介してオブジェクトに背景属性を設定することを指します。

CSS背景背景機能: 単色の背景を設定します。背景の背景は、オブジェクトの背景色を単色に設定し、画像を背景として設定できます。背景が写真の場合は、その写真を横方向に繰り返し並べたり、オブジェクトの任意の位置に写真を背景として固定したりすることができます。

6. CSS 背景属性と CSS3 背景画像設定概要の共有

background すべての背景属性を 1 つのステートメントで設定します

background-attachment 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します

background- color 要素の背景色を設定します

background-image 要素の背景画像を設定します

background-position 背景画像の開始位置を設定します

関連する質問と回答

1. CSS 背景画像の読み込み速度を向上させます

2. iOS では、background:unset を使用できませんか?では、背景色をキャンセルしたい場合はどうすればよいでしょうか?

3.

ボディの背景の位置

[関連する推奨事項]

1. PHP 中国語 Web サイトの無料チュートリアル:

「CSS オンライン マニュアル」

2. すぐに学べる PHP 中国語 Web サイトの無料ビデオ チュートリアル:

" HTML ビデオ チュートリアル》

3. php 中国語 Web サイトの無料ビデオ チュートリアル:

《php.cn Dugu Jiijian (2)-css ビデオ チュートリアル》

以上がCSS での背景属性の使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。