ホームページ > 記事 > ウェブフロントエンド > CSS3で背景シリーズの背景を追加する方法を詳しく解説
前1. これまでに学習した背景属性を振り返る
1.1 背景-COLOR
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
言葉で表現できるのは単純な色
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.2background-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) スクロール: スクロールします。デフォルト値 固定: 固定。スクロールバーがスクロールしてもスクロールしません ローカル
背景属性はb
ordbackground: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-boxpadding-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;
background-size: value
Value: **length value**pxpercentage
: ボックスの幅に基づくauto
:背景 画像の実際のサイズcontain: 完全に表示
(拡大縮小時に画像の幅または高さがボックスの端に「触れる」と、変化が停止します)cover: 完全に表示フル
(コンテナを完全に覆うように背景画像 をスケーリングすると、背景画像がコンテナを超える可能性があります) 引き伸ばすための幅などの値が 1 つしかない場合、高さはデフォルトで自動になり、等しい比率が維持されます。 値が2つの場合、幅と高さがそれぞれ対応する値に引き伸ばされ、変形する場合があります。
以上がCSS3で背景シリーズの背景を追加する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。