CSS 中的 background 背景属性命令大全

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

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

例子：   如何指定一个固定的背景图像：
{ 
       background-image:url('smiley.gif');
       background-repeat:no-repeat;
       background-attachment:fixed;
}

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

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

语法：background-clip: border-box|padding-box|content-box;
例子：指定绘图区的背景：
                          div
                          {
                             background-color:yellow;
                            background-clip:content-box;
                          }

3、background-color 属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

属性值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

例子：设置不同元素的背景色：            body
                                  {
                                     background-color:yellow;
                                  }
                                   h1
                                 {
                                     background-color:#00ff00;
                                  }

4、background-image属性 设置一个元素的背景图像。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。Tip: 务必设置背景色，如果图像是不可用，将被使用。

属性值	说明
url(‘URL’)	图像的URL
none	无图像背景会显示。这是默认
inherit	指定背景图像应该从父元素继承

例子：  设置body元素的背景图像：
body
{
background-image:url('paper.gif');
background-color:#cccccc;
}

5、background-size 属性指定背景图片大小。

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

例子：  指定背景图像的大小：
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

6、background-repeat 属性的作用是设置如何平铺对象的 background-image 属性，默认情况下，重复background-image的垂直和水平方向

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

例子：  只有垂直方向重复background-image：
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}

7、background-Origin属性指定background-position属性应该是相对位置。注意：如果背景图像background-attachment是"固定"，这个属性没有任何效果

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

例子：   内容框相对定位的背景图片：
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

8、background-position属性设置背景图像的起始位置。注意：对于这个工作在Firefox和Opera，background-attachment必须设置为 “fixed（固定）”。

值	描述
left top，left center，left bottom，right top，right center，right bottom，center top，center center，center，bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

例子：  如何定位background-image：
body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

9、background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

值	描述
normal	默认值。设置正常的混合模式
multiply	正片叠底模式
screen	滤色模式
overlay	叠加模式
darken	变暗模式
lighten	变亮模式
color-dodge	颜色减淡模式
saturation	饱和度模式
color	颜色模式
luminosity	亮度模式

语法：background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;