利用css将背景图片铺满整个屏幕

2024-07-16 05:09| 来源: 网络整理| 查看: 265

方法一：

*{ margin:0; padding:0; } html,body{ width: 100%;height: 100%; } body{ background: url(allnormal.png); background-size: 100% 100%; background-position: center center; overflow: auto; }

方法二：在低版本的ie中

问题一：在低版本的ie中，如果图片过大，在屏幕中只能显示部分图片

解决：

#div { width: 100%; height:100%; background:url('/assets/p-default/images/act/a.png') no-repeat; background-size:100% 100%; position: relative; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/p-default/images/act/a.png', sizingMethod='scale'); -ms-behavior: url('/assets/p-default/css/backgroundsize.min.htc'); behavior: url('/assets/p-default/css/backgroundsize.min.htc'); }

backgroundsize.min.htc，这个是一个国外大牛写的文件，下载地址：

http://www.dowebok.com/139.html 或者 https://github.com/yangshengquan87/ie7.git

上面的两种方法不够完美，图片容易拉伸，造成图片上的文字的效果很难看

下面的方法彻底解决问题：

我们需要的效果是

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

以图片bg.jpg为例

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

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

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

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

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

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

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

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

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

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

首先在html中加入以下代码

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

img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; }

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

@media screen and (max-width: 1024px) { img.bg { left: 50%; margin-left: -512px; } }

兼容以下浏览器

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

下面再说一种方法

JQ模拟的方法

html部分

css部分

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

js部分

$(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"); });

支持浏览器

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

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

html部分

css部分

.bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(bg.jpg) no-repeat #000; background-size: cover; z-index: -1; }

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

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

浏览器支持

ie7+绝大多数主流浏览器

【本文地址】

公司简介

联系我们