CSS属性参考 | background

04-13 次

标签背景 css教程 css属性

CSS background属性是背景属性的简写方式，用于集中设置各种背景属性。

background属性可以为多个背景图层设置背景，各个背景图层之间使用逗号来分隔。

background: [ <bg-layer> , ]* <final-bg-layer>

每一个背景图层都可以指定不同的background-image，background-position，background-repeat，background-origin, background-clip，background-size 和 background-attachment属性。

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

每一个背景层的各个背景属性都会被设置为它们的初始值，然后再根据background属性指定的值来覆盖相应的属性值。也就是说，除了给定的属性值，其它属性值使用它们的默认值。

例如下面的一个例子，在这个例子中只为元素的background属性设置了background-attachment属性。

.element {
    background: fixed;
}

上面为元素设置背景的声明相当于：

.element {
    background-color: transparent;    /* 初始值 */
    background-position: 0% 0%;       /* 初始值 */
    background-size: auto auto;       /* 初始值 */
    background-repeat: repeat repeat; /* 初始值 */
    background-clip: border-box;      /* 初始值 */
    background-origin: padding-box;   /* 初始值 */
    background-attachment: fixed;     /* 声明的值 */
    background-image: none;           /* 初始值 */
}

当使用background属性为元素设置多个图层时，由于整个元素只能够有一个背景颜色，因此，background-color属性要声明在最后面一个图层的结束位置。

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

<box>有3个可选的值：padding-box、content-box和border-box（具体参考background-clip属性）。

background-clip属性和background-origin属性都是设置盒模型box的值，那么在background简写方式中如何区分它们呢？

如果在background简写方式中只有一个<box>值，那么background-clip属性和background-origin属性的值都被设置为该<box>值。如果在background简写方式中给出了2个<box>值，那么第一个会被设置为background-origin属性的值，第二个会被设置为background-clip属性的值。

官方语法

background: [ <bg-layer> , ]* <final-bg-layer>

/* 其中 */
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

/* 其中 */
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

参数：

<background-image>：参考background-image。
<background-position>：参考background-position
<background-size>：参考background-size。
<background-repeat>：参考background-repeat。
<background-origin>：参考background-origin。
<background-clip>：参考background-clip。
<background-attachment>：参考background-attachment。
<background-color>：参考background-color。

background属性的初始值为：

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

background属性的各个值的顺序是可以随意的，唯一的要求是background-size属性必须在 background-position属性之后，并且它们之间使用“/”符号来分隔。

除非你指定了background-position属性，否则在background属性中指定的background-clip属性无效。

示例代码

下面的代码使用background属性为元素设置背景。

.element {
    background: #eee urlimage.jpg) top 50% / contain fixed no-repeat;
}

上面的声明等效于：

.element {
    background-image: url(image.jpg);
    background-color: #eee;
    background-position: top 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-origin: padding-box; /* 初始值 */
    backgrounnd-clip: border-box; /* 初始值 */
}

再来看一个例子：

div {
    background: padding-box url(image.jpg) deepPink center center;
}
/* 等价于 */
div {
    background-color: deepPink;
    background-image: url(image.jpg);
    background-repeat: repeat; /* 初始值 */
    background-attachment: scroll; /* 初始值 */ 
    background-position: center center;
    /* 只声明了一个<box>值，所以background-origin和background-clip属性都使用该值 */
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto; 
}

下面是使用background属性设置多个背景层的例子：

.element {
    background: url(a.png) top left no-repeat,
                url(b.png) center / 100% 100% no-repeat,
                url(c.png) white;
}

上面的声明等价于：

.element {
    background-image:      url(a.png),  url(b.png),          url(c.png);
    background-position:   top left,    center,              top left;
    background-repeat:     no-repeat,   no-repeat no-repeat, repeat;
    background-clip:       border-box,  border-box,          border-box;
    background-origin:     padding-box, padding-box,         padding-box;
    background-size:       auto auto,   100% 100%,           auto auto;
    background-attachment: scroll,      scroll,              scroll;
    background-color:      white;
}

在线演示

下面的例子使用background属性来设置元素的背景属性。

.container{
  width: 700px;
  height: 400px;
  margin: 50px auto;
  background: url(img/colin.png) 70% 20% / 128px 128px no-repeat,
          url(img/bg-1.jpg) top left / cover no-repeat #006699;
}

下载源代码