当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | background

CSS属性参考 | background

2016-04-13
麦子学院

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

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

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

每一个背景图层都可以指定不同的background-imagebackground-positionbackground-repeatbackground-origin, background-clipbackground-sizebackground-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-boxcontent-boxborder-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属性的初始值为:

  • 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;
}                              
                            

下载源代码

浏览器支持

所有的现代浏览器都支持background属性,包括 Chrome, Firefox, Safari, Opera, IE以及 Android 和 iOS。

相关阅读
Previous:
上一篇:CSS属性参考 | background-size
Next:
下一篇:CSS属性参考 | border-bottom-width

我要评论

返回顶部