所有的

css实现的网页全背景图片
740
2014-1-15

原文链接:http://css-tricks.com/perfect-full-page-background-image/

这篇文章最早在09年8月21日发表,现在是经过完全的修改后重新发布的。之前的连中方法已经删掉,取而代之的是四种全新方法

我们的目标是创建一张背景图,而且它能一直覆盖整个浏览器的窗口。我们看看它有什么特点:

  1. 图片覆盖整个页面,没有白边

  2. 按需要缩放图片

  3. 保留图片比例(方向 比例)

  4. 图片居中

  5. 不产生滚动条

  6. 尽可能保证浏览器的兼容性

  7. 不使用Flash这样的把戏

full-img

强劲 简单 先进的CSS3方式

鉴于css3中已经有了background-size 这个属性,那我们完全就可以使用css来实现了。使用html元素(不用body是因为至少html的height总是浏览器窗口的高度)。我们设置background为fixed和center,再使用background-size来适应大小

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

可用于:
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 支持background-size 但不是这个关键字)
Firefox 3.6+ (Firefox 4 支持没有前缀的版本)
更新:
感谢Goltzman 在评论中提出了IE的兼容方式:






filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";



注意,读者 Pierre Orsander提出他们尝试使用这种方式时候发现页面在关闭时会出现一些问题。
更新:Matt Litherland任何人尝试使用上述IE的filter,在滚动条、死链、或其他地方出现问题时,就不该在html或body元素上添加样式,而是使用一个position为fixed的,width、height均为100%的div代替。

纯CSS方式 #1

同样,非常感谢Doug Neiner 提供的另一个版本。这里我们使用一个inline的img标签,这就可以在任何浏览器里都能改变大小。设置一个min-height来保证能够在垂直方向上填充浏览器,设置width 100%保证水平填充。同时给img设置min-width来保证图片永远不会比它本身还小。
这里可用到的特殊技巧就是使用media query来检查是否浏览器比图片还要小,使用left和margin-left的组合来保证图片居中。

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
 
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
 
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}
 
@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}




可用于:
任何版本的现代浏览器: Safari / Chrome / Opera / Firefox
IE 6:不支持—-但是通过某些定位也能修复
IE 7/8: 绝大多数正常, 小尺寸屏幕下不会居中但能很好的填充屏幕
IE 9: OK!

纯CSS方式 #2

另一种简单的实现方式是在页面上放一个inline的img标签,通过position:fixed定位于左上角,ming-width和min-height为100%,保留其长宽比

<img src="images/bg.jpg" id="bg" alt="">
#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
 
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}



然而,这样没有使图片居中。那我们就把它设为fixed,同时包裹于div内,而且这个div是浏览器窗口宽高的200%。那么图片就能居中定位,同时保留长宽比。


<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#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; 
  min-width: 50%;
  min-height: 50%;
}


可用于:
Safari / Chrome / Firefox (最近版本都是可行的)
IE 8+
Opera (任何版本) 以及 IE 都以相同方式崩溃(定位错误,具体原因不明)[最新的webkit内核的可行]
Peter VanWylen 提到:如果你是通过js添加的图片,那么在IE8 9 10 中img需要设置 width: auto; and height: auto;

jQuery方式

如果我们知道一张图品的宽高比是大于还是小于浏览器的窗口,那事情就变得容易多了。若果小,那我们只需要设置width 100%,那它就能把宽高填充。如果图片要高我们只需要设置height 100%就能达到同样效果。
上述想法可以通过js实现,我更倾向于jQuery。


<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
 
$(window).load(function() {    
    var theWindow = $(window),
        $bg = $("#bg"),
    aspectRatio = $bg.width() / $bg.height();                       
    function resizeBg() {
        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg.removeClass().addClass('bgheight');
    } else {
             $bg.removeClass().addClass('bgwidth');
    }               
    }
 
    theWindow.resize(resizeBg).trigger("resize");
 
});


可用于:

IE7+ (IE6下通过position fixed也可能生效)
绝大多数其他桌面浏览器


全部评论
(1)
评论速度
mores++

还可以输入 2000 个字符
添加表情