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

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

1.1 背景-COLOR

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

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

2.3background-size

1.1背景色属性:background-color

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

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

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

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

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

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

すべて#で始まります。はすべて 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.2background-image

は、ボックスに背景

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

background:url(images/1.jpg);

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

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

1.4 背景位置属性

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

:

左右を表す言葉:

、center、

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

右下角：background-position: right bottom;

1.6 背景の包括的な属性

背景属性はb

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-背景画像の原点

: 境界線を無視し、境界線の開始点 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:

percentage

auto

contain: 完全に表示

cover: 完全に表示フル

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

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