完美的背景图全屏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+
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭