关闭

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

188人阅读 评论(0) 收藏 举报

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

需要的效果

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

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:683次
    • 积分:51
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档