css中如何调整插入背景图片的大小

CSS2.1 之前是不能设置背景图大小的，CSS3就可以通过background-size来设定图片大小，可以是像素或者是百分比。

例如background-size:100px 200px表示把背景图片大小调整为100x200px。

要把图像应用成为背景，要使用 background-image这一 属性。当background-image 属性默认值是 none的时候，这表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

可以使用css的background-size属性来调整背景图片的大小，比如：

background-size: 240px 180px

背景图片的宽为240像素，高为180像素

background-size: 50% 30%

背景图片的宽设为容器宽度的50%，高设为容器高度的30%

background-size: cover

把背景图片扩展至足够大，以使背景图片完全覆盖容器区域（背景图片的某些部分也许无法显示在容器区域中）

background-size: contain

把背景图片扩展至最大尺寸，以使其宽度和高度完全适应容器区域（容器的部分边角位置可能会留空）

需要注意的是，background-size是css3的属性，浏览器必须支持css3才能看到预期的效果。好在现在的主流浏览器都是支持css3的（如果你坚持用IE6那当我没说）

1、css2中是无法控制背景图片大小的，如果想实现这种效果，只能是更改图片了。

2、css3中可以通过background-size来控制图片的大小。

background-size属性用法：

background-size:

length|percentage|cover|contain

1）length:设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为

"auto"。

2）以父元素的百分比来设置背景图像的宽度和高度。

3）把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

4）把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

具体示例可以参考：http://www.w3school.com.cn/cssref/pr_background-size.asp

---