分享让网页背景图片在任意分辨率屏幕都能平铺的方法

Author posted @ 2014年8月17日 16:39 in Html5 , 1615 阅读

看到了一篇很好的文章"Perfect Full Page Background Image".文中总结了多种让图片铺满整个屏幕的方法,不论屏幕的分辨率是多少。有用纯CSS实现的, 也有用 JQuery实现的,各种方法都提供了示例。

个人喜欢由Corey Worrell提供的纯CSS方法。这里没有直接用background-image,而是直接用的foreground image作为背景图。html部分如下:

<div id="bg">
  <img src="images/bg.jpg" alt="background image">
</div>

css部分:

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  /* preserve aspet ratio */
  min-width: 50%;
  min-height: 50%;
}

思路是先创建一个<div id="bg">,这个div的大小是窗口大小的两倍,位置是fixed,起始坐标为top:-50%; left:-50%;。然后把图片的位置设为top:0; left: 0; 再设置minm-width和min-height属性来保证图片大小不小于div的50%。由于这个div的大小是窗口的两倍,这样图片的大小就正好与窗口大小一样,并且是centered。

TV LED SONY 说:
2018年5月29日 04:08

思路是先创建一个<div id="bg">,这个div的大小是窗口大小的两倍,位置是fixed,起始坐标为top:-50%; left:-50%;。


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter