CSS (二) 背景

css背景样式
1、设置背景色：background-color
设置input标签背景色为蓝色，这个属性接受任何合法的颜色值

input { background-color: blue; }

2、设置背景图像：background-image
设置背景图像，必须为这个属性设置一个 URL 值为图片路径。

body { 
      background-image: url(log.png); 
      }

这时背景图片会默认铺满页面：

背景图平铺：background-repeat
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 ：
repeat: 导致图像在水平垂直方向上都平铺，默认效果
repeat-x ：图像只在水平上重复

body {
       background-image: url(log.png);
	   background-repeat: repeat-x 
	   }

repeat-y ：图像在垂直方向上重复

body { 
       background-image: url(log.png);
	   background-repeat: repeat-y 
	   }

no-repeat ：不允许图像在任何方向上平铺。

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat 
	   }

3、背景定位： background-position
可以利用 background-position 属性改变图像在背景中的位置。
定位方式：位置关键字、百分比、长度值

位置关键字：

top: 固定顶点位置，否则图片会上下剧中而显示不全

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-position: center top;
	   }

left:

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-position: letf top;
	   }

right:

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-position: right top;
	   }

bottom：

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-position: right bottom;
	   }

百分比数值：

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-position: 50% 50%;
	   }

长度值：
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 100 像素、向下 200 像素的位置上：

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-position: 100px 200px;
	   }

3、背景关联：background-attachment
声明图像相对于可视区是固定的，因此不会受到滚动的影响。
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
如下：滑动页面时图像会固定不动

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-position: 100px 200px;
	   background-attachment: fixed;
	   }

4、背景图大小：background-size

通过像素指定

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-size: 300px 200px;
	   }

通过百分比指定

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-size: 10% 10%; 
	   }

原始图片大小

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-size: auto; 
	   }

背景填满容器

body { 
	   background-image: url(log.png);
	   background-repeat: no-repeat;
	   background-size: cover;
	   }