CSS——背景

background-color（背景颜色）

 

background-image（背景图片）

background-image: url(../img/1.jpg);

格式：background-image：url（相对路径）----相对路径

 

• 如果背景图片大于元素，默认会显示图片的左上角。
• 如果背景图片一样大，完整显示。
• 如果背景图片小于元素，默认将背景图片平铺以充满元素。
• 可以同时为一个元素指定背景图片和背景颜色，背景颜色会作为背景图片的底色。
•  

background-repeat：用于设置背景图片的重复方式。

可选值：

repeat：背景图片会双方向重复。

no-repeat：不重复。

repeat-x：背景图水平方向重复

repeat-y：背景图沿垂直方向重复

做一个图片渐变的导航条用到截一个像素的图片，next --->repeat-x

.box1{
				 width: 990px;
				 height: 23px;
				 background-color: aqua;
				 margin:50px auto;
				 background-image: url(../img/q1.gif);
				 background-repeat: repeat-x;
			}

背景图片默认是在背景的左上角。

background-position调整背景图片在元素中的位置

可选值：

top right left bottom center

中的两个值来指定一个背景图片的位置。

也可以直接指定两个偏移量，第一个值是水平偏移量x，第二个值是垂直偏移量y。（如果指定的是正值则向右移，如果是负值则向左移）（位置灵活）

 

background-attchment设置背景图片是否随页面滚动

可选值：

scroll  滚动

fixed  固定在某一位置（一般设置给body，不设置给body）

当背景图片设置为fixed时候，背景图片的定位永远相对于浏览器窗口。

.box1{
				background-color: skyblue;
				width: 500px;
				height: 500px;
				background-image: url(../img/plane.jpg);
				background-repeat: no-repeat;
				background-position: bottom right;
				background-position: 100px 100px;
				background-attachment: fixed;
			}

通过background可以设置所有背景相关的样式：

没有顺序要求，没写的就当做默认值。

background: salmon url(../img/plane.jpg) center center no-repeat;