首页 / 技术 / 正文

网页全屏自适应显示背景图片

2015年03月15日 2 条评论 ... 技术

注:本篇文章没有任何技术含量,纯自己个人学习查漏所写,大神请绕道。

这几天在给别人定制主题的过程中,偶然分析别人的网页找出了网页中全屏自适应背景图片,在之前的 Lipop 1.2 修复版本发布之前,我自己还研究了半天如何实现自适应背景图片的方式,甚至动用了 jQuery 计算浏览器高度和宽度的方式,结果最后不但占用了大量系统资源,而且显示的效果并不完美。因此而弃用了。

演示效果

如图所示,实现的方式非常简单,只需要设置背景图片的 CSS 即可

  1. background: #272B2B url(images/background.jpg) no-repeat fixed center;
  2. background-size: cover;

第一句代码有五组参数,从左到右分别是:背景颜色、背景图片、图像如何重复(设置为不重复)、图像是否随网页滚动(fixed是固定不滚动)、图像的初始位置(设置为中间)。

HTML 中 background 的基础参数就是这5个,其实起作用的是第二句代码,与桌面设置壁纸一样,都是有拉伸或者平铺等,background-size 也有四个可选参数。分别是:length(指定长度)percentage(指定百分比)、cover(设置扩展图像足够大使其覆盖全屏)、contain(扩展最大尺寸)。

经过测试证明,cover 和 contain 中,cover 能全屏显示,但是可能不会显示全部图像,contain 如果设置图片宽度低于屏幕宽度,则会出现背景色,不能全屏显示,因此最合适的选择还是 cover 了。

 

其实这款主题是 Lipop 的高度修改版,整体上与原版的 Lipop 差距比较大。周六在外面跟小伙伴狠狠地腐败一把,然后脑洞大开做出来的一个主题版本。也满足了我很久之前就想做无边框大图主题的愿望。主题个人感觉还是很漂亮的。

文章演示

修改版主题暂时不对外开放下载。

2 条评论

Loading...
  1. 瑾瑜

    我的导航也是用的cover,不过好像浏览器版本需要高一些的才可以,这就是为什么好多站用js实现吧~

    2015-03-16 [回复]
    • 有野出没

      现在我已经不再考虑低版本浏览器的兼容性了,对于低版本浏览器,我直接选择不支持。

      2015-03-17 [回复]

发布评论