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

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

需要的效果

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

以图片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+
Chrome
IE 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中加入以下代码

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

然后通过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 / Firefox
IE9+
IE 7/8: 平铺效果支持，但是在小于1024px的屏幕下居中效果失效

下面再说一种方法

JQ模拟的方法

html部分

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

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 / Firefox
IE7+

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

html部分

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

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+
绝大多数主流浏览器

▶ Walkthrough007

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

background 互联网图片_完美的背景图全屏css代码 – background-size:cover?
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法需要的效果图片以背景的形式铺满整个屏幕,不留空白区域保持图像的纵横比(图片不变形) 图片居中不出现滚动条多浏览器支持 ...
css禁止背景图拉伸_html-css控制背景图全屏拉伸不重复显示
在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...
HTML背景图全屏显示
要在HTML中实现全屏显示的背景图,可以使用CSS的background属性和一些特定的值来实现.以下是一种方法: HTML: <!DOCTYPE html> <html> & ...
背景图全屏水平垂直居中的方法
在开发登录页面或者其他全屏背景图的页面,需要背景图全屏并且水平垂直居中,根据浏览器窗口大小自适应.尝试多种方法后,使用了最简单的两行代码搞定. /* 要想实现全屏高度需要单独设置 html 和 bod ...
html背景图片手机端全屏,css 背景图全屏显示，兼容移动端
.login { background: url(img/login.jpg) no-repeat center center; background-size: cover; background- ...
HTML背景图片全屏CSS
前言:小刘经常自写项目需要用到背景图片,好看又自适应太难了! 背景图片自适应屏幕 body {background-image: url('http://www.17sucai.com/preview ...
完美的css背景图片全屏显示，能比例缩小，不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
html自适应屏幕大小渐变背景色,CSS实现背景渐变和自动全屏的代码
CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题: 在设置了背景颜色渐变后好不容易调成了全屏覆盖但按下了F11的时候崩溃的世界开始了所以这篇文章主要介绍CSS背景渐变色 ...
css 全屏显示一张图片_css3背景图片全屏显示的例子
背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示. 如何用css背景图片拉伸以及100% 满屏显示呢?这个问题 ...

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

延伸阅读

▶ Walkthrough007

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

最新文章

热门文章