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

转载 2016年05月31日 11:44:49

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

需要的效果

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

以图片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+

相关文章推荐

css用一张背景图background-position定位

css用一张背景图background-position定位 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏...

HTML&CSS——对背景图定位中background-position属性的自我理解

最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍...

img撑满全屏的方法(img非背景图)

我有一个模板,想按常规做一个div里面放置一个img图片,并且让图片铺满容器,自适应容器大小。HTML结构代码如下(在这个盒模型上,我已经放置了一些不重要的样式)。 div style="heigh...

完美的css背景图片全屏显示,能比例缩小,不留空白

简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念。但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任...
  • killcwd
  • killcwd
  • 2015年12月12日 09:09
  • 3219
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:完美的背景图全屏css代码 – background-size:cover
举报原因:
原因补充:

(最多只允许输入30个字)