背景图cover

Dear 丶 2022-05-30 01:12 201阅读 0赞

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

*  25983

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

需要的效果

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

以图片bg.jpg为例

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

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

1.  html \{
2.    background: url(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-width: 1024px;
4.      width: 100%;
5.      height: auto;
6.      position: fixed;
7.      top: 0;
8.      left: 0;
9.  \}

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

1.  @media screen and (max-width: 1024px) \{
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 \{ position: fixed; top: 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.      position: fixed;
3.      top: 0;
4.      left: 0;
5.      width: 100%;
6.      height: 100%;
7.      background: url(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='.http://huilang.me/bg.jpg', sizingMethod='scale')";
2.  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://huilang.me/bg.jpg', sizingMethod='scale');

[Link 1]: http://huilang.me/perfect-full-page-background-image/