background简写属性

现在流行组合，什么歌唱团体，TFboys、至上励合等等。background属性也赶时髦，它也有组合。我们知道background有很多的单个属性，有background-position、background-repeat等，我们可以把这些background的这些属性简写到组合中，它的格式为：

background:
    [background-color] 
    [background-image] 
    [background-repeat]
    [background-attachment] 
    [background-position\] / 
    [ background-size]
    [background-origin] 
    [background-clip];

各个单个属性之间用空格分割

比如：

background:
    #ccc 
    url(http://xiaoyangblogt.duapp.com/wp-content/uploads/2017/11/clip-1.png) 
    repeat-x 
    scroll 
    0px 0px / 
    400px 400px 
    border-box 
    padding-box;

---

background的这些简写属性不必全都写，不写的属性视为缺省值，采用默认值。

比如：

background:#ccc repeat;

---

缺省值这里要注意一下，其他的属性还好说，要特别注意background-position和background-size这两个属性，因为它们的值都是像0px 0px这种格式的，所以要用这种格式：[background-position] / [background-size],如果简写，没有“/”则表示为background-position的值，而background-size采用缺省值。

比如：

background:#ccc 0px 0px;

此处的0px 0px表示的是background-position属性，而background-size采用的是默认值。

还有background-origin和background-clip属性，他们的值也是一样的，都是border-box、padding-box和content-box属性。所以在简写的时候也要注意，如果简写的属性值其中一个是缺省值，则保持他们的值是一致的。

比如：

background:#ccc border-box;

则表示background-origin和background-clip都采用border-box值。

---

你可能会有疑问，为什么都有单个的属性了，还要有简写属性，这是不是画蛇添足？当然不是，简写属性的好处就是：

• 可以向前兼容早期版本的浏览器
• 简写属性给出一个通用的背景采用的值，单个属性可以相对于某一需求覆盖简写属性的某属性的值。因为单个属性的优先级要高于简写属性的优先级

比如：

body{
    background: #ccc 0px 0px;
}
body div{
    background-color:#666;
}

此时div中的background-color属性的值就是#666，而不是#ccc。

微信公众号：

原文链接