实现全屏背景图的css3代码

作者:课课家教育更新于： 2016-09-18 17:20:09

      打破传统网页视觉单调的一种常用方法，是使用一张全屏的图片作为背景。

　　早期的css不支持背景的缩放，所以想要在不同的显示器乃至移动设备上都能够100%填充页面区域（也就是我们常说的响应式布局），我们只能用图片标签代替背景填充，然后用绝对定位的div使内容叠放于图片之上，必要的时候还需要javaScript的配合。这将导致开发难度增大不少，而且容易产生各种浏览器兼容问题。

　　CSS3新增了background-size属性，让背景自身也能缩放，本教程就为大家介绍如何使用这一属性轻松实现响应式全屏背景图，效果如下图所示

　　首先准备好一张背景图片，并存放于网页目录下的images文件夹，命名为background-photo.jpg，然后来编写基础的html代码。本例我们直接在body上设置背景。

　　运行代码，会发现，不管当前设备的尺寸是多少，页面都直接按原尺寸显示图片，尺寸较小的屏幕显示不全，尺寸较大的屏幕将留出空白。（可以通过拉伸浏览器模拟小尺寸设备）

　　下面我们加入background-size来控制背景的缩放。为方便观察效果，本例我们使用一张较简单的图片来展示。

　　background-size属性支持多种写法，现列举如下。

　　写法1：直接传入宽高，并用英文空格进行分隔。

　　background-size:100px100px;

　　效果如下图所示（灰色代表页面边框）

　　写法2：只传入一个尺寸，此时宽高都等于该数值。

　　background-size:200px;

　　效果如下图所示。

　　很显然，直接传入尺寸的写法不能适应屏幕，下面来看百分比的写法。

　　写法3：传入两个百分比，并用英文空格进行分隔。

　　background-size:100%100%;

　　效果如下图所示。

　　写法4：只传入一个百分比

　　background-size:100%;

　　跟传入一个像素值不同的是，一个百分比不会导致图片发生不等比缩放，也就是说，以下两种写法不等价。

　　background-size:100%;

　　background-size:100%100%;

　　但像素的写法则是一个和两个值完全等价。

　　background-size:100px;

　　background-size:100px100px;

　　如果页面宽高跟图片宽高不一致，那么一个百分比的设置将会对图片进行裁剪。当然了，对于背景来说，部分被裁剪一般对页面的美观影响不大。

　　想要等比但图片不被裁剪的方法就是让宽高按缩放比例较小的一方进行适应，然后缩放比例较大的一方留出空白。下面我们就来学习这种写法。

　　写法5：用contain来实现留空模式的等比缩放

　　backgrond-size:contain;

　　效果如下图所示，保持图片比例的情况下，图片也能显示完全。

　　与之相对应地，就是裁剪模式的等比缩放了。

　　写法6：cover，它跟100%完全等价。

　　backgrond-size:cover;

　　效果如下图所示，它跟100%的效果一致。

　　右侧留空或者只裁剪图片下面的部分对于大多数背景来说可能不是很合适，这时候我们可以通过background-position属性来调整背景的对齐方式。

　　以下代码可以实现图片居中对齐。

　　backgrond-size:contain;

　　background-position:center;

　　效果如下图所示，空白的部分平均分配到了两侧。

　　类似地，我们可以实现上下都裁剪相同的尺寸。

　　backgrond-size:contain;

　　background-position:center;

　　效果如下图所示。

　　也有一些背景图片适合使用底部对齐，比如下面这张。

　　对于这样的背景图片，我们可以用background-position:bottom来实现底部对齐。

　　人的注意力越分散，做事就越容易出错，浏览器处理页面也一样。如果把图片作为元素呈现在页面上，那么图片将要和文字内容混在一起，容易导致浏览器分心而引发各种异常。所以，用CSS3让背景直接缩放的最大优势就在于它不会作为网页元素嵌入到网页上，从而有效减少跟网页其它内容的冲突，也能更好地避免各种浏览器兼容问题。