完美的背景图全屏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-size:cover?

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域保持图像的纵横比(图片不变形)图片居中不出现滚动条多浏览器支持 ...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2015年03月26日 14:41
  • 25754

background-size值为cover和值为100%的区别

background-size:100% 100%;---按容器比例撑满,图片变形; background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变。IE8及以下版...
  • zengyonglan
  • zengyonglan
  • 2017年01月06日 16:35
  • 3024

background-size cover和contain的区别

相同点:图片都是等比例缩放 不同点:cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示 比如下面这张图,宽比高大很多,使用cover那么两边的就不会显示 backgr...
  • zch681990
  • zch681990
  • 2015年01月16日 10:31
  • 17576

css3 background-size:cover IE8不支持 解决办法

因为IE8浏览器这个坑,不支持css3的background-size:cover这个属性,当时有一个很大的图片需要做页面的背景,要适应不同分辨率的电脑,然后就遇到了这个问题 IE8虽然不支持这个属...
  • a460550542
  • a460550542
  • 2017年04月12日 01:53
  • 1291

background-size:cover兼容IE8的方法

background-size: cover; 可以通过滤镜filter来兼容IE8,实现相似的效果。
  • man_tutu
  • man_tutu
  • 2017年04月27日 11:16
  • 2428

同时使用background-attachment:fixed; 和 background-size:cover;时背景图大小被切割的解决方法

想要的效果:网站banner图片,在往下拉滚动条的时候,希望保持不动,下面的内容从它上面盖过去。 ...
  • yingbangwang
  • yingbangwang
  • 2017年03月29日 18:25
  • 441

使用JavaScript的Canvas模拟CSS3中的background-size:cover;

语法 background-size: length|percentage|cover|contain; 值 描述 测试 length 设置背景图像...
  • lsjlnd
  • lsjlnd
  • 2015年07月22日 09:45
  • 350

background-size:cover与-webkit-background-size

在使用jade和styl写手机页面时,且元素为背景图片时,常会使用到background-size cover,它的意思是使背景图片铺满整个元素,且保证背景图片的宽高比。 即当图片小于容器时,又无法...
  • sunny327
  • sunny327
  • 2014年09月25日 23:43
  • 2478

background-size:cover | contain;

background-size:cover | contain; 原图 不使用background-size 第一张背景图片:600 × 431第二张背景图片:426 × 600每个...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2015年04月12日 00:21
  • 954

css3的background-size兼容IE低版本

众所周知。IE浏览器是个特么头疼的家伙,是不是看到它就想当面强奸它的感觉 我也是刚初来咋到,今天写页面的时候用到的css3的background-size属性,其经常出现的值有cover或者用100%...
  • sina1990125
  • sina1990125
  • 2015年11月12日 10:34
  • 680
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:完美的背景图全屏css代码 – background-size:cover
举报原因:
原因补充:

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