稻米鼠 · 更新于 2018-05-24 22:00:34

第二十八章 首屏大海报(二)

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

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

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

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

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

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

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

background-size: 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 元素里边放一个空链接,我说的空是指链接内没有内容,不是说不设置链接的各种属性哦。

<div id="post">
    <a href="http://www.google.com" class="post-link"></a>
</div><!-- #post End -->

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

#post .post-link {
    display: block;
    width: 960px;
    height: 100%;
    margin: 0 auto;
}

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

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

本章学习卡片:卡片 28

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me