9.cssbackground_html/css_WEB-ITnose

このセクションもボックスモデルの拡張に関するものですが、個人的にはボックスモデルを絵として考えるのが好きです。要素のサイズ調整はキャンバスサイズの調整、枠線の設定は額縁のモザイクです。しかし、最終的に自分の絵を美術館（ウェブページ）に展示することになるアーティストにとって、さまざまな絵に背景を描くことができるように、私たちも自分の絵に背景を設定することができます。

次の表は、背景に関連するいくつかのプロパティをまとめたものです。背景

11 、 31 、 331 1, 333 11. 背景色 値 説明 CSS バージョン

	背景 -画像	なしまたはURL	背景の画像
	background-repeat	スタイル名	背景画像のスタイル
	背景サイズ	長さの値 またはその他	背景画像のサイズ
	background-position	位置座標	背景画像の位置
	background-attachment	スクロール方法	背景画像のスクロール
	background-clip	Cropメソッド	背景画像のトリミング
	background-origin	位置座標	背景画像の開始点
	背景	合成値	背景画像の略語
	上記の表からわかるように、背景は1.色、2.画像と関連設定の2つにすぎません。以下、一つずつ説明していきましょう。

色

背景色を指定した色に設定します

1

透明背景を設定するcolor to transparent Color 1

div {     background-color: silver; }

説明: color の値については、css color を参照してください。要素の背景色はブラウザのデフォルト色である透明なので、特別に設定する必要はほとんどありません。さらに、6c04bd5ca3fcae76e30b72ad730ca86d 要素に色を設定すると、ページ全体の色が設定されます。 2. 背景画像 Value

2.1 画像の導入	background-image 属性を使用して背景用の画像を導入します

説明

CSS バージョン

なし

キャンセル背景画像の設定

1

url

URL を通じて背景画像を設定する background-repeat属性で決定 CSS version

1		body { background-image: url(loading.gif); }
説明: none 値は子要素の継承問題を解決するためのもので、url は置かれたin は画像リソースのアドレスです。		2.2 画像のタイリング方法
	value	description

repeat-x

水平に並べて表示された画像

1

repeat-y

画像を垂直方向に並べて表示画像を水平方向と垂直方向に同時に並べて表示画像のタイル表示を無効にする

body {     background-image: url(loading.gif);     background-repeat: no-repeat; }

 

　　解释：所谓平铺，就是当图片小于元素的大小时，会试图复制自己而填满整个元素

 

　　2.3 图片位置的调整

　　　　使用background-position属性来调整图片在元素里的位置，一般要先禁用图片的平铺行为。

1		repeat
1		no-repeat
1

值	说明	CSS 版本
top	将背景图片定位到元素顶部	1
left	将背景图片定位到元素左部	1
right	将背景图片定位到元素右部	1
bottom	将背景图片定位到元素底部	1
center	将背景图片定位到元素中部	1
长度值	使用长度值偏移图片的位置	1
百分数	使用百分数偏移图片的位置	1

 

　　

/*将背景图片置于页面上方，如果想置于左上方则值为：top left*/body {     background-image: url(loading.gif);     background-repeat: no-repeat;     background-position: top; } /*使用长度值或百分数，第一值表示左边，第二个值表示上边*/body {     background-image: url(loading.gif);     background-repeat: no-repeat;    background-position: 20px 20px; } 

 

 

　　2.4 图片的大小

　　　　由background-size属性控制。

值	说明	CSS 版本
auto	默认值，图像以原尺寸显示	3
cover	等比例缩放图像，使图像至少覆盖容器，但有可能超出容器	3
contain	等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合	3
长度值	CSS 长度值，比如 px、em	3
百分数	比如：100%	3

　　具体说明看表格就好，这里就不举例了。

 

　　2.5 图片是否滚动

　　　　由background-attachment属性控制。

值	说明	CSS 版本
scroll	默认值，背景固定在元素上，不会随着内容一起滚动	1
fixed	背景固定在视窗上，内容滚动时背景不动	1

body {     background-image: url(loading.gif);     background-attachment: fixed; } 

 

　　　　解释：fixed 值会导致背景产生水印效果，拖动滚动条而背景不动。

　　2.6 图片在元素的那个区域显示

　　　　由background-origin控制，和图片的位置调整不同，位置调整默认是在元素内部显示，而这里的居于除了元素的内部以为，还包括内边距和边框。

值	说明	CSS 版本
border-box	在元素的边框绘制背景	3
padding-box	在元素的内边距绘制背景	3
content-box	在元素的内容部分绘制背景	3

div {     width: 400px;     height: 300px;     border: 10px dashed red;     padding: 50px;     background-image: url(img.png);     background-repeat: no-repeat;     background-origin: content-box; } 

 

　　　解释：在内容部分绘制背景，其实就是设置背景起始位置。

 

　　2.7 图片的裁剪

　　　　由background-clip控制。在图片尺寸小于元素时，会有平铺的行为。而大于时，我们就要决定是否对多余的部分进行裁剪了。

值	说明	CSS 版本
border-box	在元素盒子内部裁剪背景	3
padding-box	在内边距盒子内部裁剪背景	3
content-box	在内容内部裁剪背景	3

div {     width: 400px;     height: 300px;     border: 10px dashed red;     padding: 50px;     background-image: url(img.png);     background-repeat: no-repeat;    background-origin: border-box;     background-clip: padding-box; } 

 

　　

　　2.8 简写形式

　　　　和很多设置一样，背景也有相应的简写形式，其顺序如下：

　　　　[background-color]

　　　　[background-image]

　　　　[background-repeat]

　　　　[background-attachment]

　　　　[background-position] / [ background-size]

　　　　[background-origin]

　　　　[background-clip];

div {     width: 400px; height:     300px; border: 10px dashed red;     padding: 50px;     background: silver url(img.png) no-repeat scroll left top/100% border-box content-box; }