css中的背景图怎么改变大小

html-css015

css中的背景图怎么改变大小,第1张

在css中控制插入背景图片的大小用background-size

background-size使用语法有下面四种情况

background-size: length|percentage|cover|contain

length用法：

background-size:100px；  //背景图片显示的宽和高为100像素

background-size:100px  160px；//背景图片显示的宽为100像素，高为600像素

percentage用法：

background-size：60%； //背景图片的显示宽度和高度是图片大小60%；

background-size：60%  80%； // 背景图片的显示宽度是图片大小的60%，高度是80%；

cover用法：

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

contain用法：

background-size：contain； //把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

扩展资料

background-size属性浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

参考资料

百度百科——background(计算机专业术语)

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

对背景图片设置属性：background-size：cover可以实现背景图片适应div的大小。

background-size有3个属性：

auto：当使用该属性的时候，背景图片将保持100%

的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。

cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片被隐藏的部分最少，这种属性在大图背景中应用比较广泛。这点比较难理解，需要结合实践理解。

contain：当使用该属性时，图片被缩放至最大且能被完全展示出来，但是由于图片的的尺寸比例与div的尺寸比例会有不同，所以当图片不能盖住div时，图片会自动平铺。