CSSの背景属性の具体的な解析

1. 背景属性は要素の背景スタイルを設定できます。もちろん、要素には特定の幅と高さの値があることが前提となります。

最初に簡単な背景設定を行いましょう:

#show-box {
            width: 800px;
            height: 500px;
            CSSの背景属性の具体的な解析: #000;
            CSSの背景属性の具体的な解析-image: url(image url);
        }
    </style>

ここでは、色と背景テクスチャを設定するだけです。

公式背景のプロパティを見てみましょう:

構文形式:

背景: 色 位置 サイズ リピート原点 クリップ添付画像;

注: 「位置」と「サイズ」が 2 つの場合属性では、2 つのパラメータ値「位置/サイズ」を区切るのにスペースを使用する代わりに、左スラッシュ「/」を使用する必要があります。

1 CSSの背景属性の具体的な解析: url("img.jpg") center center/100% 100% no-repeat;

属性テーブル（画像が小さく表示される可能性があります。元の画像を表示するには、「新しいタブで開く」を右クリックしてください）:

1.color: 背景色の値。この属性は要素全体に色を追加し、一番下にあります (これは背景画像がある場合に表示されます)。

オプションの値: デフォルトは透明ですが、他の値は「CSS カラー値テーブル」を参照して設定できます。

<style>
        #show-box {
            width: 180px;
            height: 180px;
            border: 20px dashed #000;
            CSSの背景属性の具体的な解析-color: #000000;
            CSSの背景属性の具体的な解析-color: blue;
            CSSの背景属性の具体的な解析-color: rgb(255, 255, 255);
            CSSの背景属性の具体的な解析-color: rgba(255, 255, 255, 0.8);
        }
    </style>

2.position: 背景画像の位置。画像設定がない場合、この属性は効果がありません。

オプションの値: 2 つのパラメーター、水平位置と垂直位置。値が 1 つしかない場合、2 番目の値は「center」になります。

デフォルト値は要素の左上隅です。位置キーワード (上、右、下、左、中央) を使用できます。パーセント (要素のサイズに基づく)。ピクセル値。

<style>
        #show-box {
            width: 180px;
            height: 180px;
            border: 20px dashed #000;
            CSSの背景属性の具体的な解析-position: center;
            CSSの背景属性の具体的な解析-position: center top;
            CSSの背景属性の具体的な解析-position: 0 100px;
            CSSの背景属性の具体的な解析-position: 10% 20%;
        }
    </style>

3.size: 画像サイズ。写真に適用されます。

オプションの値: 2 つの値。値が 1 つしかない場合、2 番目の値は auto です。

デフォルトは画像そのもののサイズです。ピクセル値、パーセント (要素サイズに基づく) を使用できます。

cover: この要素をカバーするように画像を比例的に拡大縮小します。 Windows のデスクトップの背景の「塗りつぶし」に似ています。

内容: 要素の幅または高さに合わせて画像を比例的に拡大縮小します。 Windows のデスクトップの背景の「適応」に似ています。

4.repeat: タイリング方法。

繰り返し: 完全にタイル化し、要素全体を埋めるように画像をコピーします。 (デフォルト)

repeat-x: 横に並べて、コピーして横方向に並べます。

repeat-y: 垂直タイル、コピーして垂直方向にタイルします。

no-repeat: タイリングなし、1 つの画像のみを使用します。

5.origin:背景の参照領域。

オプションの値: border-box、padding-box、content-box。

6.clip: 背景の表示領域。

オプションの値: border-box、padding-box、content-box。

異なる値のレンダリングを比較します:

1.origin:border-box;clip:border-box;

2.origin:padding-box;

3.origin：content-box；clip：border-box；

<style>
        #show-box {
            width: 180px;
            height: 180px;
            margin: 20px;
            padding: 20px;
            border: 20px dashed #000;
            CSSの背景属性の具体的な解析: url("img.jpg") no-repeat border-box border-box;
        }
    </style>

4.origin：border-box；clip：content-box；

<style>
        #show-box {
            width: 180px;
            height: 180px;
            margin: 20px;
            padding: 20px;
            border: 20px dashed #000;
            CSSの背景属性の具体的な解析: url("img.jpg") no-repeat padding-box border-box;
        }
    </style>

そうだね原点が位置を設定し、クリップが領域に応じて背景画像をトリミングすることがわかります。

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

デフォルト値はスクロールです: 背景画像はページの残りの部分とともにスクロールします。 fix: 背景画像が固定されます。

8. 複数の背景設定。

写真のインポート:CSSの背景属性の具体的な解析-image:url(image url);

2. 複数の背景設定。

複数の背景の書き方：カンマ「,」で区切って背景属性を続けて書きます。

CSSの背景属性の具体的な解析:

カラー位置サイズリピート原点クリップ添付画像

;

特定の属性も個別に設定できます:CSSの背景属性の具体的な解析-image: url (画像 URL 1)、URL (画像URL 2);リーリーリー

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