注:本篇文章没有任何技术含量,纯自己个人学习查漏所写,大神请绕道。
这几天在给别人定制主题的过程中,偶然分析别人的网页找出了网页中全屏自适应背景图片,在之前的 Lipop 1.2 修复版本发布之前,我自己还研究了半天如何实现自适应背景图片的方式,甚至动用了 jQuery 计算浏览器高度和宽度的方式,结果最后不但占用了大量系统资源,而且显示的效果并不完美。因此而弃用了。
如图所示,实现的方式非常简单,只需要设置背景图片的 CSS 即可
- background: #272B2B url(images/background.jpg) no-repeat fixed center;
- background-size: cover;
第一句代码有五组参数,从左到右分别是:背景颜色、背景图片、图像如何重复(设置为不重复)、图像是否随网页滚动(fixed是固定不滚动)、图像的初始位置(设置为中间)。
HTML 中 background 的基础参数就是这5个,其实起作用的是第二句代码,与桌面设置壁纸一样,都是有拉伸或者平铺等,background-size 也有四个可选参数。分别是:length(指定长度)、percentage(指定百分比)、cover(设置扩展图像足够大使其覆盖全屏)、contain(扩展最大尺寸)。
经过测试证明,cover 和 contain 中,cover 能全屏显示,但是可能不会显示全部图像,contain 如果设置图片宽度低于屏幕宽度,则会出现背景色,不能全屏显示,因此最合适的选择还是 cover 了。
其实这款主题是 Lipop 的高度修改版,整体上与原版的 Lipop 差距比较大。周六在外面跟小伙伴狠狠地腐败一把,然后脑洞大开做出来的一个主题版本。也满足了我很久之前就想做无边框大图主题的愿望。主题个人感觉还是很漂亮的。
修改版主题暂时不对外开放下载。
感谢你的赏识与认可
支付宝
微信支付
使用手机访问这篇文章
本文许可协议 © CC BY-NC-SA 4.0 转载请注明来源
- 上一篇: 殉命的1050 番外一则
- 下一篇: LESS编译器SimpLESS使用教程
我的导航也是用的cover,不过好像浏览器版本需要高一些的才可以,这就是为什么好多站用js实现吧~
现在我已经不再考虑低版本浏览器的兼容性了,对于低版本浏览器,我直接选择不支持。