CSSページレイアウト（ページ背景）に関する常識のまとめ

CSS には多くの知識があり、すべてを覚えるのは不可能です。暇なときに、CSS ページ レイアウトに関する一般的な知識をまとめました。この記事では、CSS ページの背景に関する一般的な知識を紹介します。困っている友達は参考にしていただければ幸いです。

1. 背景色の設定

CSS は、ページの背景色を設定するための background-color プロパティを提供します。

例: 背景色: 赤;

2. 背景画像を設定します

画像をページに追加します

#構文: < ; img src=”pic.jpg”/>

ページに背景画像を追加する

CSS は、ページに背景画像を直接追加するための background-image 属性を提供します。

構文：background-image: url (pic.jpg);

(1) 背景画像のタイリング

CSS は、background-repeat プロパティを提供します。背景画像のタイリング方法を設定します。 4 つの属性があります:repeat (背景画像が水平および垂直に並べて表示されます)、no-repeat (背景画像が水平に並べて表示されません)、repeat-x (背景画像が水平に並べて表示されます)、repeat-y (背景画像が水平に並べて表示されます)縦に並べてあります）。

構文:background-repeat:repeatmode;

(2) 背景画像の位置

CSSは、設定するbackground-position属性を提供します。背景画像とページの相対位置。

構文:background-position:position;

位置は、長さの単位、パーセンテージ、およびキーワードを使用して決定できます。

長さの単位を使用:background-position:10px 20px; (背景画像は x 軸に沿って 10px、y 軸に沿って 20px 移動します)

パーセントを使用:background-position: 30 % 30%;

キーワードを使用します:background-position: rightbottom; 属性値には、水平方向の left、center、right、垂直方向の top、center、bottom が含まれます。

(3) 固定背景画像とスクロール背景画像

CSS は、background-attachment 属性を提供します。属性値「scroll」は、背景画像がオブジェクトのコンテンツとともにスクロールすることを示し、「fixed」は、背景画像が固定されていることを示します。

例: 背景添付: 固定;

3. ページの背景属性

属性、background-image、background-position、background-repeat、背景添付ファイルの 4 つのプロパティは、背景を使用して省略できます。

例: 背景: URL (pic.jpg) 10px 20px リピート固定;

以上がCSSページレイアウト（ページ背景）に関する常識のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。