web前端学习

概述

CSS 背景属性用于定义HTML元素的背景。

属性	释义
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-size	设置背景图像的尺寸
background-repeat	设置背景图像是否及如何重复
background-position	设置背景图像的起始位置
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background	简写属性，作用是将背景属性设置在一个声明中

1.背景颜色background-color

在CSS中，网页元素的背景颜色用background-color属性来设置。

	
#test_box5{
	width: 100px;
	height: 50px;
	background-color: green;
}

2.背景图像background-image

为指定盒子加载指定背景图片。

文字内容

	
#test_box6{
	width: 200px;
	height: 120px;
	background-image: url("../images/shuijiao.jpg");
	background-size: cover; /*背景铺设方式*/
	
	text-align: center;
	line-height: 120px;
	font-size: 30px;
}

3.背景图像尺寸background-size

指定背景图像的大小，有以下四种方式可选： (1) 绝对尺寸：第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)。以空格隔开高和宽，以逗号“,”隔开指定多重背景。 (2) 相对尺寸：第一个值设置宽度，第二个值设置的高度，如果只给出一个值，第二个是设置为 auto(自动)。以空格隔开高和宽，以逗号“,”隔开指定多重背景。 (3) cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 (4) contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size设置为cover

background-size设置为contain

	
#test_box7{
	width: 260px;
	height: 120px;
	border: 1px solid #000000;
	background-image: url("../images/shuijiao.jpg");
	background-size: cover;
	background-repeat: no-repeat;/* 也是默认值 */
}
#test_box8{
	width: 260px;
	height: 120px;
	border: 1px solid #000000;
	background-image: url("../images/shuijiao.jpg");
	background-size: contain;
	background-repeat: no-repeat;/* 也是默认值 */
}

4.背景图像平铺方式background-repeat

当背景图像小于盒子尺寸时控制图像在盒子内的平铺方式，以下为可选值： no-repeat（背景图像不重复）； repeat-x（背景图像在水平方向重复平铺）； repeat-y（背景图像在垂直方向重复平铺）； repeat（背景图像在水平和垂直方向都重复平铺）。

	
#test_box7{
	width: 180px;
	height: 120px;
	background-image: url("../images/Iconfont.png");
	background-size: 50px 50px;
	background-repeat: repeat;/* 也是默认值 */
}

5.背景图像定位background-position

设置背景图像偏移位置。默认背景图像的左上角点与盒子模型的左上角点重合。 background-position的属性值表示背景图像的坐标，可以使用多种描述方式：（1）使用以长度为单位的数值，最常用的单位是px。例如：background-position: 20px 30px; （2）使用表示方位的关键词，包括left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。例如：background-position:right top; 表示图像与元素的右上角对齐。若只有一个值，另一个值默认为center（居中）。（3）使用百分比指定背景图像在元素中的位置。其中，左上角是0% 0%；右下角是100% 100%。默认值为0% 0%，此时背景图像位于元素的左上角。background-position:20% 60%；表示图像在水平和垂直方向分别位于元素的20%（右）和60%（下）处。（4）当使用长度单位数值时：① 水平方向，正数表示图像相对于元素左上角点向右移动；负数表示图像相对于元素左上角点向左移动。② 垂直方向，正数表示图像相对于元素左上角点向下移动；负数表示图像相对于元素左上角点向上移动。

	
#test_box8{
	width: 200px;
	height: 120px;
	background-image: url("../images/shuijiao.jpg");
	background-size: cover;
	background-position: 40px 20px;
}

6.背景图像固定background-attachment

当网页页面较长时，如果希望背景图像不要随着滚动条移动，此时需要固定背景图像。 background-attachment可选的值：fixed（固定），croll（滚动）。

	
#test_box9{
	width: 200px;
	height: 120px;
	background-image: url("../images/shuijiao.jpg");
	/* 此时是按整个也面的尺寸来定的 */
	background-size: cover;
	background-attachment: fixed;
}

7.多背景图像

CSS可以通过background-image属性为一个元素添加多幅背景图像。不同的背景图像地址用逗号隔开，显示时图像会彼此堆叠，其中第一幅图像堆叠在最上层。

	
#test_box10{
	width: 200px;
	height: 120px;
	background-image: url("../images/Iconfont.png"),url("../images/shuijiao.jpg");
	background-size: 40px 40px,cover;
	background-repeat: no-repeat,repeat;
	background-position: 50% 50%,left top;
}

8.综合设置背景属性background

利用background属性可以综合设置元素的背景样式，语法如下：background:背景色 url(背景图) 平铺定位固定; 属性值的位置可以调换，不需要设置的属性可以省略。例如：body{background:url(images/bj.jpg) no-repeat 30px 90px fixed;}

	
#test_box11{
	width: 200px;
	height: 120px;
	background:grey url("../images/Iconfont.png") no-repeat center scroll;
}