据说看完上一节教程之后好几拨人哭昏在了厕所。别再昏了，起来嗨~

其实后面讲到响应式我们可以根据实际情况去调节海报的高度，讲到 JQuery 我们可以很方便的动态设置海报高度。那时候有的你们哭的，让感动的泪水尽情地挥洒吧，欧耶~

反正也都感动了，索性再感动一下好了，来玩个 CSS3 的属性哦~对了，你们说什么是 CSS3 啊，什么是 HTML5 啊，就是那些低版本 IE 兼容不了的东西……

所以今天的属性你要是在小于等于 8 版本的 IE 下浏览可能不起作用。这个属性是 background-size ，他可以同时含有两个值，依次是 X 轴方向和 Y 轴方向。可以设置带长度单位的数字值，或者百分比。然后不设置则默认 auto。这个跟 width 或者 height属性是一致的，其实这就是设置背景图片的宽高，你看这个以前让很多人发愁过的问题到了 CSS3 下面变得十分简单了。

只是宽高设置还需要演示么？配合昨天讲到的（background-position）可以想出各种玩法，看你的想象力了哦。然后我们再来说一个  background-size 的特殊值：cover。这个值什么意思呢？就是图片等比例缩放至恰好覆盖整个元素，这种情况其实说白了就是某一边正好100%，另一边等于或者大于元素对应方向的长度。

反正你理解为图片不变形（只是放大或者缩小）的填满元素就是了，再不理解就试试呗，反正不要钱。这就是学习方法，你看，这么说就显得高大上了。

然后我们这里就用 cover 这个值就好了。

看看效果，大图在横向上得以完美地展示：

但是这里存在一些隐含的问题，第一、我们当前图片较大，需要进行偏移（background-position），那么我们的偏移量就很难确定，不过如果你只是定位（left、top 之类）倒是还不至于有影响；第二、我们的海报（#post）长宽比不是确定的，所以，你可能无法确定究竟哪一边是 100%，进而的，你也可能无法十分明确的确定海报的展示区域。在当前，这是我们很难解决的问题，所以这次我们无法使用这个属性。但是等到后面我们学习了响应式和 JQ 之后，可以根据情况对网页进行动态设置了，那这些鸡肋的问题就可以解决掉了。那才是真正有了生命的网页。

好啦，演示了一个 CSS3 属性，其实也不过如此嘛，没有什么神奇的地方，跟以前的属性用起来一样的普通啊，而且他也有他的小缺点。可是有些人非得神化这些东西，把 HTML5 和 CSS3 搞得多么多么高大上，其实完全没必要么，反正我就是个土鳖，给我披萨我也卷着大葱吃，但是我身体倍儿棒，你能怎么样。

反正也是讲到背景图像嘛，索性我们就再讲一个属性好了。background-attachment ，这个属性是说元素的背景图像是否相对于窗口滚动，默认当然是滚动了，就是像我们平时见到的那样。但是当你设置为 fixed 的时候，他就相对于窗口固定了，测试方法：给咱们现在的代码的 #post 元素加上 background-attachment: fixed; ，然后在 html 代码里的 #post 元素下面加上很多个 <br /> 这样页面就可以滚动了哦，那么上下滚动页面试试看吧，随便你的页面怎么动，背景也在原地的哦。借助这个属性我们又可以做出很多神奇的效果了呢。当然，这里也说明了上一章提到的 w3cschool 的说法是怎样的误导了。

然后，我们把background-attachment: fixed; 去掉哦，那些多加的 br 自然也要去掉，回到我们的主线任务上来。我们的主线任务是什么来的？哦，对了，吃烤串，老板，再来三十串大鱿鱼，少放辣椒，对，就是对面这个正在看我教程的人付款。别跑，还有啤酒呢……算了，他跑了，我们继续聊海报。

这是一个海报，假设我们现在我们的海报上已经有了完整的内容，你别看我，我这上没有，我就放了张图片示意一下，看不惯你咬我啊，额，男生就算了。那么我们现在想给他加个链接，这是一个很常见的需求，对吧。你说要是图片就简单了，可是我们却把它设置成了背景。我跟你说啊，这个要是图片，你想让他这么居中对齐，然后两边超出的部分隐藏，这个效果可是要好麻烦才能做出来的哦。而且你真的打算给宽屏图片整个加链接吗？那你一定没考虑过用户体验这一层。

我在一个页面需要滚动的时候喜欢先用鼠标在空白的地方点一下，以确保焦点在页面上。但是如果我点哪里都会产生某些作用的话，我会很困扰。就好像你要抓住一块掉落的豆腐，却又不能让他碎掉般纠结。所以我觉得我们把两边只是为了视觉补白的部分留出来，只给中间有效内容区加链接就好。

怎么加？其实完全是我们讲过的东西哦，先给 #post 元素里边放一个空链接，我说的空是指链接内没有内容，不是说不设置链接的各种属性哦。

然后给刚才的链接设置 CSS。

a 是内联元素（inline），先转换成块元素，然后设置宽高，最后用 margin 居中，很简单。但是我们的目的达到了，去页面移动鼠标看看吧，注意鼠标光标的变化哦~~

然后说一下这个宽度，960px 是在 1024px 宽度的屏幕下可以舒服的展示（不出现横向滚动条）的最大宽度。有人说淘宝的 990px 宽度，不过不幸的是掏宝商城页面在 1024px 宽度屏幕下会出现横向滚动。也许你说这不重要吧，反正现在都是大屏幕，这就看你期望怎样的兼容性了。不过其实有了响应式，这些问题也就不是大问题了。可是到了低版本的 IE 上，唉，一切都是浮云，不得不再说一句 IE 该死！

本章代码