完美的背景图全屏css代码 – background-size:cover?

2014.08.06 分享 92461 人浏览 6 条留言

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法

需要的效果

  1. 图片以背景的形式铺满整个屏幕,不留空白区域
  2. 保持图像的纵横比(图片不变形)
  3. 图片居中
  4. 不出现滚动条
  5. 多浏览器支持

以图片bg.jpg为例

最简单,最高效的方法 CSS3.0

归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下

  1. html {
  2.   backgroundurl(bg.jpg) no-repeat center center fixed;
  3.   -webkit-background-size: cover;
  4.   -moz-background-size: cover;
  5.   -o-background-size: cover;
  6.   background-size: cover;
  7. }

这段样式适用于以下浏览器

  • Safari 3+
  • Chrome
  • IE 9+
  • Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover)
  • Firefox 3.6+

这里你会发现ie8及以下版本不支持,这些蛋疼浏览器则需要添加下面的css来设置兼容

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

这个用滤镜来兼容的写法并不是很完美,首先是图片路径,这里只能是相对于根目录的路径,或者用绝对路径;然后是图片纵横比改变了,是拉伸铺满的形式。尽管如此,总比留空白好多了吧(如果背景图bg.jpg的宽高够大,则可以不用这段,变成简单的平铺,比图片变形效果好写,大家可以尝试下)

 

如果你觉得上面的方法不是很满意,那试试下面这种

用img形式来实现背景平铺效果

首先在html中加入以下代码

  1. <img src="bg.jpg" class="bg">

然后通过css来实现铺满效果(假设图片宽度1024px)

  1. img.bg {
  2.     min-height: 100%;
  3.     min-width1024px;
  4.     width: 100%;
  5.     heightauto;
  6.     positionfixed;
  7.     top: 0;
  8.     left: 0;
  9. }

下面这个是为了屏幕小于1024px宽时,图片仍然能居中显示(注意上面假设的图片宽度)

  1. @media screen and (max-width1024px) {
  2.   img.bg {
  3.     left: 50%;
  4.     margin-left: -512px;
  5.   }
  6. }

兼容以下浏览器

  • 以下浏览器的所有版本: Safari / Chrome / Opera / Firefox
  • IE9+
  • IE 7/8: 平铺效果支持,但是在小于1024px的屏幕下居中效果失效

 

下面再说一种方法

JQ模拟的方法

html部分

  1. <img src="bg.jpg" id="bg" alt="">

css部分

  1. #bg { positionfixedtop: 0; left: 0; }
  2. .bgwidth { width: 100%; }
  3. .bgheight { height: 100%; }

js部分

  1. $(window).load(function() {
  2.     var theWindow        = $(window),
  3.         $bg              = $("#bg"),
  4.         aspectRatio      = $bg.width() / $bg.height();
  5.     function resizeBg() {
  6.         if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
  7.             $bg
  8.                 .removeClass()
  9.                 .addClass('bgheight');
  10.         } else {
  11.             $bg
  12.                 .removeClass()
  13.                 .addClass('bgwidth');
  14.         }
  15.     }
  16.     theWindow.resize(resizeBg).trigger("resize");
  17. });

支持浏览器

  • 以下浏览器的所有版本: Safari / Chrome / Opera / Firefox
  • IE7+

 

 

其实我自己一般用的是(因为够用了,咱不挑/其实上面的都是俺翻译过来的)

html部分

  1. <div class="bg"></div>

css部分

  1. .bg{
  2.     positionfixed;
  3.     top: 0;
  4.     left: 0;
  5.     width: 100%;
  6.     height: 100%;
  7.     backgroundurl(bg.jpg) no-repeat #000;
  8.     background-size: cover;
  9.     z-index: -1;
  10. }

如果图片宽度没有达到1900px以上,我会加上ie的滤镜来支持ie8(这里我故意用了绝对路径,请知晓,代码长的我想砸了ie)

  1. -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.https://huilang.me/bg.jpg', sizingMethod='scale')";
  2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://huilang.me/bg.jpg', sizingMethod='scale');

浏览器支持

  • ie7+
  • 绝大多数主流浏览器

 

CSS如此美妙 却被IE糟蹋了

文章地址:https://huilang.me/perfect-full-page-background-image/

“完美的背景图全屏css代码 – background-size:cover?” 有 6 条评论

  1. 杜浔说道:

    感觉打开的速度有点小慢,不知道是不是我这边网络问题。

  2. Aaron说道:

    :cry: 多进来大大的博客学习一下吧, 表示看懂了一点点。

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif