css的background其实有很多用法

听过一些高级人员说，他们面试的时候可以很豪气的跟人说“我CSS不行”，我觉得或许是因为他们不用战斗在开发的一线。对于我们这些工作在前端一线的人员来说，CSS的熟练可以大大加快开发的速度。这也就导致了这篇记录的产生！

1. 前言

首先background是个简写属性。它包含的属性如下：

background-clip、background-color、background-image、background-origin、
background-position、background-repeat、background-size，和 background-attachment
复制代码

在使用简写时，没有先后顺序的区别。

但是有几点需要注意：

1. background-position和background-size一起使用

例： center（默认值0% 0%）/contain（默认值auto auto）
复制代码

2. backround-origin和background-clip

对应的值都是content-box, padding-box（默认值）, border-box

1. 如果出现一个，表示两者均对应的该值

2）如果出现两个，前者是backgroud-origin,后者是background-clip

3. 上面4种属性都是针对background-image而言

2. 背景可以有多层（CSS3）

1. 每一层都需要通过，（逗号）分割。

2. 同一层种可以同时存在background-color和background-image, background-color位于最下层。

background: border-box content-box center/contain no-repeat url("../../media/examples/lizard.png"),yellow;
复制代码

3. 当存在多层背景时， background-color只能位于最后一层之中。

4. 渐变色如radial-gradient(crimson, skyblue)， 属于background-image。

5. 背景图在前面的，位于各层背景的上面。

background: center / contain no-repeat url("../../media/examples/firefox-logo.svg"),url("../../media/examples/star.png"),35% url("../../media/examples/lizard.png"),radial-gradient(crimson, skyblue);
复制代码

3. 标签也可以使用background属性

正常如果同时给<img />标签设置src属性和background属性时，会同时加载。

如果src的图片含有透明部分，不要设置background属性，因为会露出来。但是如果不存在前面说的情况，background（图片最好是base64）会在图片加载失败的时候显示，这样就避免了大片的空白。

但是仍然会出现默认的破损图片，不美观。具体好的实现方式可以参考这里。