css设置全屏背景图,background-size 属性_飛雲_前端开发者

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

需要的效果

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

  • 保持图像的纵横比(图片不变形)
  • 图片居中
  • 不出现滚动条
  • 多浏览器支持
  • 以图片bg.jpg为例

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

    CSS3

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

    css3background-size

    1. -webkit-background-size: cover;
    2.   -moz-background-size: cover;
    3.   -o-background-size: cover;
    4.   background-size: cover;
  • -webkit-background-size: cover;
  • -webkit-background-size: cover;background-size: cover;size: cover;

  •   -moz-background-size: cover;
  •   -moz-background-size: cover;background-size: cover;size: cover;

  •   -o-background-size: cover;
  •   -o-background-size: cover;background-size: cover;size: cover;

  •   background-size: cover;
  •   background-size: cover;background-size: cover;size: cover;

     

     

     

    适用于以下浏览器

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

    低版本浏览器不支持 。

     

    » 本文来自:前端开发者 » 《css设置全屏背景图,background-size 属性_飛雲_前端开发者》
    » 本文链接地址:https://www.rokub.com/73617.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!