阅读数:72 评论数:0

一、概述

background是css简写属性，可有一个或多个值，且可以按任意顺序放置：

background: 
<bg-color> 
<bg-image> 
<position/bg-size> 
<bg-repeat> 
<box: bg-origin|bg-clip> 
<bg-attachment> 
<initial|inherit>;

二、background-xxx属性

1、background-color

2、background-image

用于为一个元素设置一个或者多个背景图像。

background-image: url("../../media/examples/star.png"),
                  url("../../media/examples/lizard.png");

在绘制时，图像以z方向堆叠的方式进行，先指定的图像会在之后指定的图像上面绘制。

然后元素的边框border会在它们之上被绘制，而background-color会在它们之下绘制。图像的绘制与盒子以盒子的边框的关系，需要在css属性background-clip和background-origin中定义。

3、background-position

默认情况下，背景图像都是从元素padding区域的左上角开始出现的，但设计师往往希望背景能够出现在任何位置。

    background-position: xpos ypos | x% y% | x y

（1）xpos ypos

表示使用预定义关键字定位，水平方向可选关键字有left|center|right，垂直方向可选关键字有top|center|bottom。

left表示图像与对象的左边对齐，top表示图像的项部与对象的顶部对齐，center表示中心与对象的中心对齐。

（2）x% y%

表示使用百分比定位，是将图像本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合。

（3）x y

表示使用长度值定位，是将背景图像的左上角，放置在对象的区域中（x,y）所指定的位置。

4、background-size

设置背景图大小。

（1）具体尺寸：可以设置为具体的宽度和高度值，如 px、em、% 等。

/* 宽度和高度分别设置为200像素 */
background-size: 200px 200px;

（2）cover

/* 图片完全覆盖背景区域，但可能会被裁切 */
background-size: cover;

（3）contain

/* 图片完全显示，但可能不会覆盖整个背景区域 */
background-size: contain;

（4）auto

/* 图片使用其原始尺寸 */
background-size: auto;

（5）百分比

/* 背景图片的宽度是容器宽度的50%，高度是容器高度的30% */
background-size: 50% 30%;

background-size 属性通常与 background 简写属性一起使用，或者单独使用以覆盖背景图片的大小设置。

/* 背景简写，包含尺寸设置为cover */
background: url('image.jpg') no-repeat center center / cover;

5、background-repeat

定义背景图的重复方式。

6、background-clip

设置元素的背景是否延伸到边框、内边框盒子、内容盒子下面。

7、background-origin

指定background-position属性的相对位置，如果background-attachment是固定的，这个属性没有任何效果。

8、background-attachment

决定背景图像的位置是在视口内固定或者包含的区块滚动。