css background用法详解

语法:  background:bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment ;

           背景：背景色 背景图 背景图定位/背景图大小 背景图重复 背景图定位位置 绘制区域边缘 是否固定

 

常用举例（缩写版）：

background:#fff;
background:url("../img/logo.png");
background:url("../img/logo.png") center top;
background:url("../img/logo.png") 80% 100px;
background:url("../img/logo.png") no-repeat;
background:url("../img/logo.png") left bottom/80px 100% fixed;

background:#fff url("../img/logo.png") center center/80px 100px no-repeat fixed;

bg-position 和 bg-size 可以都写，也可以二选一，都写时要用 / 分隔。

 

bg-position 默认值为  0% 0%  

可选值为：

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

⚠️注意：火狐和欧朋使用该属性时，要设置bg-attachment为fixed

 

bg-size 默认值为 auto 

可选值为：

50px 100px  (只填一个值时默认第二个为auto)

30% 100%  (只填一个值时默认第二个为auto)

100px 50% 或 100% 60px （混合使用）

cover  （完全覆盖，短边为100%）

contain （图被包含，长边为100%）

 

bg-attachment 默认值为 scroll

可选值为scroll  fixed  inherit

 

bg-origin 和 bg-clip 默认值分别为：padding-box 、border-box

bg-origin : 影响bg-position，只改变背景图（只对背景图片起作用）的定位区域。  注意如果背景图像background-attachment是"fixed"，这个属性没有任何效果。

bg-clip :内容框相对定位的背景图片 背景覆盖的边缘位置（以 内边框、边框、内容区域 为边缘进行绘制）

它们的可选值都是：border-box   padding-box   content-box

 

参考：http://www.runoob.com/cssref/css3-pr-background.html