background

取值

• background-color 背景颜色
• background-image 背景图像
• background-repeat 背景图像如何铺排填充
• background-attachment
• background-position
• background-size
• background-origin
• background-clip

简写顺序
background：color img_url repeat attachment position / size

background-color

取值
[<color>]：指定颜色。

说明
当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。
如果设置了 <' [background-image]'>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。

background-image

取值

• none:无图像
• <image>：使用绝对或相对地址或者创建渐变色来确定图像。

渐变色背景
渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient

 background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
 background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);

多重背景

  padding-bottom: 200px;
  background-color: #0a8;
  background-image:   
      url(http://img.benmuhealth.com/wechatV2-mina/Duty-check.png),
      url(http://img.benmu-health.com/wechatV2-mina/Female-head.png),
      url(http://img.benmu-health.com/wechatV2-mina/Male-head.png);
  background-repeat: no-repeat;
  background-position: 0 0,
                       100px 0,
                       200px 0;  
  background-size: 100px;  

background-repeat

取值
repeat-x:背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

说明
允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值

background-attachment 背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
可以通过

background-attachment:fixed防止这种滚动。可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

取值

• scroll： 默认 背景随屏滚动
• fixed: 背景不随屏滚
• inherit 继承自父

background-position

定位背景图像

提示：需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如仅规定了一个关键词，那么第二个值将是"center"。
默认值：0% 0%。	x% y% 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如仅规定了一个值，另一个值将是50%。 可以混合使用 % 和 position 值。

background-size

规定背景图片的尺寸
能够以像素或百分比规定尺寸。
以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度

background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。

image.png

语法

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

background-clip

规定背景的绘制区域

语法

background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。