css3背景图片样式

背景样式

background：设置或检索对象的背景特性

background-color：设置或检索对象的背景颜色

background-img：设置背景图片

.background{
				background-image: url(./img/dog1.jpg);
				width: 500px;
				height: 500px;
			}

此时图片中狗的图片是两张叠加的

background-repeat:置或检索对象的背景图像如何铺排填充

repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

background-repeat: no-repeat;
border: 1px red solid;

background-repeat: repeat-x;
border: 1px red solid;

background-position属性设置背景图像的起始位置。

**background-position: horizontal vertical**(水平，垂直)
**水平是percentage | length | left | center | right**
**垂直是percentage | length | top | center | bottom** 

background-repeat: repeat-x;
background-position: 200px 100px;

如果仅指定一个关键字，其他值将会是"center"

background-size指定图片的大小

**

length	
设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"。
percentage	
将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"。
cover	
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

**

background-size: 100px;

此时变成100px像素的图片拼接在一起

background-size: cover;

background-size: contain;

background-origin属性指定background-position属性应该是相对位置。

**

padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

**

background-position: left;
background-origin: border-box;

此时position对其的方向是margin的位置

background-clip属性指定背景绘制区域。

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

background-clip: padding-box;

background-clip: content-box;

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动