css问题:如何控制背景图片的大小

html-css07

css问题:如何控制背景图片的大小,第1张

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

在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(计算机专业术语)

这个要看你背景图多大,你就给你放背景图的容器一样的宽高,这样背景就会显示出来,如果你的容器是自动高度的话,那么你就需要给这个容器最小高度这个属性,以便让背景能够显示出来。背景图片无法定义大小的。如果是一些平铺纵铺的背景,那你就可以使用repeat-x ,-y 这类的属性就可以实现。