1. css3中背景功能扩展介绍
背景在CSS3中得到了很大程度的增强。
比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
这篇文章主要介绍关于对背景尺寸的一些新增功能。
2. 设置背景图片
在介绍css3新增背景功能之前，先看下正常的设置一张图片背景
我选用了一张835*835大小的图片
将该图片设置到一个大小为400*400的盒子上，做背景图
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ /*② 设置盒子宽，高，外边距，边框*/ width: 400px; height: 400px; margin: 50px auto; border: 1px solid #ccc; /*③ 设置一张尺寸远大于盒子大小的图片*/ background-image: url("img/dw.jpg"); } </style> </head> <body> <!-- ① 创建一个盒子 --> <div class="box"> </div> </body> </html>运行结果
这明显不是我们想要看到的效果，
我们想让图片完全显示在盒子上，css3提供了这样的方法。
通过css3中提供的background-size属性就可以解决这个问题
第一种用法：background-size: 背景宽 背景高;
例1：
我们在上面的基础上，在不改变图片背景尺寸的情况下，改变盒子大小，再看下效果
将背景平铺取消再看效果
再更改背景尺寸改为宽高不相等的两个值
总结
通过background-size: 指定背景宽，指定背景高;
这种方式设置背景图片尺寸，有以下几点不足
① 当盒子大小改变时，背景尺寸不会随着盒子的改变而改变
② 当背景尺寸发生改变时，背景图片不会等比例缩放，会按执行尺寸拉伸变形
第二种用法：background-size: 百分比 百分比;
例
上图，盒子正常填满了整个盒子，当我们改变盒子大小，下图
当盒子大小发生改变， 背景图片也随着盒子大小的改变而改变，但是，图片此时却被拉伸变形。
再来看看第三种方式：background-size:contain;(包含)
例
这种方法能保证背景图片不变形，但并不会让图片填充整个盒子
第四种设置方式：background-size:cover;(覆盖)
例
举个明显的例子
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景尺寸广告图</title> <style> html,body{ /*将html和body的高度，设置为当前的实际大小*/ height: 100%; } *{ margin: 0; padding: 0; } body{ background-image: url("./img/dw.jpg"); background-size: cover; } </style> </head> <body> </body> </html>运行效果
这种方式是以图片覆盖盒子为前提，等比例缩放
① 这种方式能保证盒子大小改变，背景大小也随着改变
② 图片不会被拉伸变形
我们根据具体的使用场景来选用适合的背景图片尺寸方案
