CSS background-size属性

在生活中size无处不在，某些时候，size很重要……

嗯嗯…….我说的是background-size，想歪的同学可以去静静的面壁了。先不管面壁的同学，我们来探探background-size的奥秘。

小时候，看过《西游记》之后，做梦都在想着自己也能够拥有孙悟空那能大能小的金箍棒，感觉很是神奇。长大后才发现那只是童话故事，于是不再做梦。做了技术之后，我的梦又延续了，因为技术真的可以做到能大能小。

background-size属性是CSS3的新增属性，它可以控制背景图片的大小。通过设置background-size的属性值，我们可以做到对背景图片的拉伸或缩放，
比如：

background-size：100px 50px;

其中第一个值（100px）是用于控制背景图片的宽度的，第二个值（50px）是用于控制背景图片的高度的。

background-size属性的值可以有以下几中类型：

• 绝对值

• 百分比

• auto

• cover

• contain

---

绝对值

这里的绝对值不是数学意义上的绝对值，而是带有具体单位的值。像px、em、ch等这些CSS单位。比如上例中的

background-size：100px 50px;

就是绝对值类型的值。这里没什么好说的。

---

百分比

很多人都用不好百分比，这对于一名合格的前端技术人员来说是可悲的，后果很严重。最重要的一点是，如果用不好百分比我们就会失去了一次装x的机会。不过不要沮丧，我们有《演员的自我修养》。为了提升逼格，我们在这里就深扒一下百分比的一些奥秘。

首先百分比是一个相对的值。伟大的发明家爱迪生说过，

天才是百分之一的灵感加上百分之九十九的汗水。

这里的百分比是相对于成就计算的。那么background-size属性中的百分比是相对于谁的呢？

---

背景区域

答案是相对于背景区域的大小来计算的。也许“背景区域”这个词也有些模糊。那么我们就用background的其他属性来解释它：
首先来看看background-attachment属性：

• 如果我们设置background-attachment：scroll;那么这个背景区域就是整个背景容器所在区域；

• 如果我们设置background-attachment：local;那么这个背景区域就是背景容器中内容所在的区域（内容区域可能大于背景容器）；

• 如果我们设置background-attachment：fixed;那么这个背景区域就是可视窗口所在的区域；

然后是background-origin属性：

• 如果我们设置background-origin：border-box;那么这个背景区域就是背景容器的border-box区域；

• 如果我们设置background-origin：padding-box;那么这个背景区域就是背景容器的padding-box区域；

• 如果我们设置background-origin：content-box;那么这个背景区域就是背景容器的content-box区域；

综合上述：背景区域的大小是由background-attachment属性和background-origin属性共同作用的。

注意：当background-attachment: fixed;时background-origin属性不起作用，这时就是background-attachment属性单独作用的

通过设置background-repeat: repeat;属性我们就可以看到百分比的效果
假如有一个width: 500px;height: 500px的背景容器

其CSS规则如下：

background-repeat: repeat;background-origin: border-box;background-attachment: scroll;background-size: 25% 25%;border: 20px dashed red;

其效果图变为：

如果CSS规则改为：

background-repeat: repeat;background-origin: content-box;background-attachment: scroll;background-size: 25% 25%;border: 20px dashed red;

其效果图变为：

总结一下：背景区域的大小为100%，如果设置平铺（background-repeat:repeat;），背景图片大小为25%（background-size:25% 25%;），则表示在背景区域，可以平铺4×4张背景图片。

那么

• 如果background-attachment:fixed;则表示在可视窗口（背景区域），可以平铺4×4张背景图片（但背景图片只能在背景容器内可见）；
• 如果background-attachment:local;（假如内容区域大于背景容器的大小），则表示在内容区域（背景区域），可以平铺4×4张背景图片（但背景图片只能在背景容器内可见）；

具体效果你可以自己实践。

---

auto

auto是一个神奇的东西。background-size属性的默认值是background-size: auto auto;它设置背景图片的大小为原图片的大小。上述的绝对值类型和百分比类型可以只写一个值，此时另一个值会设置成auto。

比如：
background-size: 100px;相当于background-size: 100px auto;
background-size: 25%;相当于background-size: 25% auto;

这时又不得不提一下auto的一个BUFF：

• 当第一个值为绝对值，第二个值为auto时，表示背景图片的宽度为100px，高度为原背景图片宽高比调整的高度（100px：高度 = 原宽度：原高度）；
• 当第一个值为百分比，第二个值为auto时，表示背景图片的宽度为背景区域宽度的25%，高度为原背景图片宽高比调整的高度（背景区域宽×25%：高度 = 原宽度：原高度），即它会保持原背景图片的宽高比；

你也可以这样写：
background-size: auto 100px;（高度100px 宽度按原比例缩放）
background-size: auto 25%;（高度25%背景区域高度 宽度按原比例缩放）

总之auto会按照原图片宽高比例来调整被设置成auto处的值。

---

cover

background-size有两个特殊值，一个是cover，另一个是contain。它们都是按原图片宽高比例进行拉伸会缩放。cover有“覆盖”的意思。在CSS中它的潜台词就是把背景图片毫无保留的覆盖背景容器内。

所谓“覆盖”，就是通过等比例拉伸或缩放让背景图片尽可能（背景区域不留空白）的铺满背景容器。理论上，超出背景区域的部分还是存在于页面，但视觉效果会告诉我们超出的部分被“卡擦”了（这是由background-clip属性控制的）。

比如：还是上面的原图，给它设置CSS规则

background-origin: content-box;background-clip: border-box;background-size: cover;background-repeat: no-repeat;background-attachment: scroll;border: 20px dashed red;

效果如下：

---

contain

cover和contain是一对双胞胎兄弟，表面看起来极其相似，但是只要你跟它们相处久了，就会发现它们的性格是完全不一样的。contain有“包含”的意思，它也会按照原背景图片的比例拉伸或缩放图片，但是contain并不“贪心”，只要宽高全部包含在背景区域内，它就会停止“抢地盘”。

cover就像一个大胖子，它说：

“我要挤满背景区域”，于是它一使劲，做到了，但赘肉却弹出了背景区域。

contain是个小瘦子，它说：

“我要挤满背景区域”，于是他一使劲，做到了，但毕竟瘦一些，还是空出了一些位子。

给它设置CSS规则

background-origin: content-box;background-clip: border-box;background-size: cover;background-repeat: no-repeat;background-attachment: scroll;border: 20px dashed red;

效果如下：

---

总结

吃完了正餐，接下来是饭后甜点的时间了。

• auto、百分比、绝对值类型的值background-size的双值模式，它们可以随意搭配
  如果只有一个值，那么第二个值auto去躲猫猫了，它是默认值。

background-size: 50px 25%;background-size: auto 25%;background-size: auto 50px;background-size: 50px;background-size: 25%;

• cover和contain值是background-size的单值模式。它们“独霸”background-size的双值位置三十年，专制各种不服。

background-size: cover;background-size: contain;