CSS基本スタイル————Background_html/css_WEB-ITnose

1. CSS では、背景として単色を適用でき、背景画像を使用して非常に複雑な効果を作成することもできます。

2.

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

body{    background-color: darkgray;}<p>测试一下背景是否可以继承</p>

背景色属性は継承できません

p{    background-color: aqua;}

この時点で見れます p要素に背景色が追加されていますが、この時点では背景色が比較的長くテキストの範囲を超えています 修正したい場合は修正するしかありません。 css スタイルで p タグ全体の幅を変更します

p{    width: 150px;    background-color: aqua;}

これで、変更された p タグの幅の効果がわかりますが、この時点では背景色が少し狭いため、パディング属性で幅を広くします

p{    width: 150px;    padding: 10px;    background-color: aqua;}

背景画像 画像を背景として設定します

body{    background-image: url("1.jpg");}

ラベルに個別に背景色を追加することもできます

p{    background-image: url("1.jpg");}

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

body{    background-image: url("1.jpg");    background-repeat: no-repeat;    background-position: right;}

このとき、背景画像は右に流れて画像の半分だけが残りました

実際、この属性が単独で現れることはめったにありませんが、実際には 2 つの部分に分かれて現れます。

right は「右」と「中央」を表します。 🎜>right は画像が配置されている現在のビューの位置を表します

center は現在の画像が表示される位置を表します (つまり、画像は中央から表示されます)

これで時間に応じて、background-position 属性値を変更できます。

これは、背景画像が図の上から開始してビューの右側に表示されることを意味します (フル表示効果)

background-position: right top;

background-position に特定の値を追加することもできます

このとき、左上隅から開始することを意味します ( 0 ,0) 点から開始します

background-position: 0px 0px;

多くの場合、その位置を決定するには数値を使用する方が便利です

パーセンテージを使用して位置を決定することもできます

背景添付ファイル 背景画像が固定されているか、ページの残りの部分と一緒にスクロールするか

デフォルトでは、背景画像はページと一緒にスクロールします

body{    background-image: url("1.jpg");    background-repeat: no-repeat;    background-attachment: fixed;}

ここで、ページに従わないようにbackground-attachment属性が設定されています スクロール

background-repeat 背景画像を繰り返すかどうかと繰り返し方法を設定します

これは以前に使用されています

3. CSS3 背景

background-size のサイズを指定します。背景画像

背景原点は背景画像の配置領域を指定します

body{    background-image: url("1.jpg");    background-repeat: no-repeat;    background-size: 600px 600px;}

背景クリップは描画領域を指定します背景の