CSS背景（background)

CSS背景（background)

background-color	背景颜色
background-image	背景图片
background-repeat	背景平铺
background-position	背景起始位置
background-attachment	背景固定
background-size	背景尺寸

背景图片默认展示位置是padding+content

背景颜色（color)

语法：

~~~ ~~~
background-color: 颜色值 | 十六进制 | rgb

### 背景图片（image）

语法：

~~~ ~~~
background-image : none | url (url) 

参数：

none：无背景图（默认）

url: 使用绝对或相对地址指定背景图像地址

\ 是Windows路径不是通用路径

背景平铺（repeat）

语法：

~~~ ~~~
background-repeat: no-repeat|repeat|repeat-x|repeat-y

参数：

no-repeat：背景图像不平铺

repeat： 背景图像在纵向和横向上平铺**（默认）**

repeat-x： 背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺 



### 背景位置(position)

语法：

~~~ ~~~
background-position : x% || y%
background-position : x px || y px
background-position : position || position 

参数：

可以给 负值 数值越大,越靠右;数值越小,越靠左

x%: 第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

只写一个值，那么第二个值是50%。

position: top | center | bottom | left | center | right

只写一个值，那么第二个值是"center"。

**x px：**左上角是 0 0。可以混合使用 % 和 position 值。

背景附着（attachment）

语法：

background-attachment : scroll | fixed 

参数：

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

背景尺寸（size)

语法：

background-size : width height; 

参数：

width 设置背景图片宽度

height 设置背景图片高度

px 根据px数值设定

% 根据容器宽度高度为100%参考设置

cover 等比例铺满 (优先保证短边的显示)

单独设置 width 时, height会等比缩放

背景简写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景大小

background: color url(image.jpg) repeat-y  scroll 50% 0/cover;

属性大于 等于3个时,采用复合型写法

属性小于3个时,采用单例写法

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

background-clip:

规定背景的绘制区域(默认值:border-box)

border-box: 背景被裁剪到边框盒
padding-box: 背景被裁剪到内边距框
content-box: 背景被裁剪到内容框

#background-origin:

相对于什么位置进行定位(默认值为padding-box)

注意:如果背景图像的background-attachment的属性为’fixde’,则该属性没有效果

padding-box:背景相对于内边框进行定位
border-box;背景相对于边框盒来定位
content-box: 背景相对于内容框来定位