CSS3で背景シリーズの背景を追加する方法を詳しく解説

前1. これまでに学習した背景属性を振り返る

1.1 背景-COLOR

1.2 背景-IMAGE

1.3 背景-Repeat
1.4 背景-POSITION
1.5 背景-ATTCH MENT
1.6 背景

2. CSS33 新しい背景属性2.1background-origin

2.2複数の背景

2.3background-size

1.1背景色属性:background-color

色を表現するには3つの方法があります:ワード、RGB表記、Sixteen Base表記

1. Word:

言葉で表現できるのは単純な色

2. RGB表記

rgbは「赤」「緑」「青」の三原色を表します。

光学ディスプレイでは、各ピクセルは 3 原色の発光素子で構成されており、明るさに応じて異なる色に調整されます。

コンマで区切って、r、g、bの値をそれぞれ0から255まで、合計256個の値

绿色：
background-color: rgb(0,255,0);  
蓝色：
background-color: rgb(0,0,255);

黑色：（光学显示器，每个元件都不发光，黑色）
background-color: rgb(0,0,0);

3の16進表記

すべて#で始まります。はすべて 16 進数です。

红色：
background-color: #ff0000;

16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

追加:

10進法の基本数値(計10個): 0、1、2、3、4、5、6、7、8、916進法の基本数値(計16個) : 0、1、2、3、4、5、6、7、8、9、a、b、c、d、d、e、f

16進数で、13という数字は何を表しますか?

は 1 16 が 1 つと 1 が 3 つを意味します。 それは19です。 これは位置の概念です。最初の人は 16 の数を表し、最後の人は 1 の数を表します。

1.2background-image

は、ボックスに背景

image

を追加するために使用されます。背景が自然に埋まっていきます。

background:url(images/1.jpg);

1.3 background-repeat

背景画像を繰り返し、繰り返し表示するかどうかを設定します。

background-repeat:no-repeat; 繰り返さないbackground-repeat:repeat-x; 水平方向に繰り返しますbackground-repeat:repeat-y; 垂直方向に繰り返します

1.4 背景位置属性

background-position:向右移动量 向下移动量

:

左右を表す言葉:

left

、center、

right

上下を表す言葉: top、center、bottom

右下角：background-position: right bottom;

1.5 背景画像がスクロールするかどうか(background-attachment) スクロール: スクロールします。デフォルト値 固定: 固定。スクロールバーがスクロールしてもスクロールしません ローカル

1.6 背景の包括的な属性

背景属性はb

ord

erと同じで、包括的な属性です:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

どの部分も省略できます:

background: red;

ボックスの場合背景画像と背景色があります。実際、主に写真が展示されており、豊かな場所は色で満たされています。

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 Background-背景画像の原点

border-box

: 境界線を無視し、境界線の開始点 0,0 から直接タイリングを開始します

padding-box: デフォルト値、パディングを無視します。パディングcontent-boxの開始点0,0から直接タイリングを開始: コンテンツ部分からタイリングを開始し、パディング位置が予約されます。したがって、パディングが影響します2.2 複数の背景CSS3 - 新しい背景シリーズの背景。背景画像はカンマで区切られ、複数のグループを記述することができます。最初にレンダリングされた画像が、後でレンダリングされた画像を覆う場合があります。

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 背景画像のサイズを制御する (background-size)

background-size: value

Value:

**length value**px

percentage

: ボックスの幅に基づく

auto

:背景 画像の実際のサイズ

contain: 完全に表示

(拡大縮小時に画像の幅または高さがボックスの端に「触れる」と、変化が停止します)

cover: 完全に表示フル

(コンテナを完全に覆うように

背景画像 をスケーリングすると、背景画像がコンテナを超える可能性があります) 引き伸ばすための幅などの値が 1 つしかない場合、高さはデフォルトで自動になり、等しい比率が維持されます。 値が2つの場合、幅と高さがそれぞれ対応する値に引き伸ばされ、変形する場合があります。

以上がCSS3で背景シリーズの背景を追加する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。