当前位置主页 > 资料库 > 前端教程 > 使用一行CSS代码生成全屏背景图像

使用一行CSS代码生成全屏背景图像

2014-12-29

查看演示 下载demo

全屏背景图像是我们在制作网站时经常使用的效果。为了使背景图像具有响应式,即缩放浏览器时背景图像会随之放大缩小,通常我们会使用jQuery来制作这种效果。

但是如果你放弃IE8及以下的IE浏览器,你可以仅仅使用一句CSS代码就可以完成这种效果。下面我们来看看如何制作。

background-size属性

通过background-size属性,你可以告诉浏览器一个元素的背景图像有多大。

#elem{
    background:url('demo.jpg') center center no-repeat;
    background-size:100px 150px;
}
                            

更为神奇的是,这个属性支持两个非常好用的值:contain cover

  • Contain :调整背景图像的大小,使它完全适合元素的大小。
  • Cover :这个值使元素的背景完全被图像覆盖。图像会调整到一个刚好适合元素的尺寸,可以看下面的图片比较一下两种效果。我们将使用Cover属性来制作全屏背景图像。

background-size属性的Contain和Cover效果

我们需要做的,是为html元素设置我们想要作为背景图像的图片。

html{
    /* This image will be displayed fullscreen */
    background:url('background.jpg') no-repeat center center;

    /* Ensure the html element always takes up the full height of the browser window */
    min-height:100%;

    /* The Magic */
    background-size:cover;
}
body{
    /* Workaround for some mobile browsers */
    min-height:100%;
}                               
                            

现在,你拥有了一个全屏显示的背景图像效果。当你改变浏览器的大小或在移动设备的小屏幕上查看这个页面时,背景图像的大小也会随之改变。这些属性可以在所有现代浏览器上正常工作(IE8级以下的IE浏览器没有效果)。

查看演示 下载demo

Previous:
上一篇:12项你应该掌握的有用的CSS3特性
Next:
下一篇:2014年100个超级漂亮的免费英文字体下载
返回顶部