1、css2中是无法控制背景图片大小的,如果想实现这种效果,只能是更改图片了。2、css3中可以通过background-size来控制图片的大小。
background-size属性用法:background-size:length|percentage|cover|contain;1)length:设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为"auto"。2)以父元素的百分比来设置背景图像的宽度和高度。3)把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。4)把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
可以使用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才能看到预期的效果。
可以通过cover和contain来对图片进行伸缩。
需要准备的材料分别有:电脑、浏览器、html编辑器。 1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的标签中,输入css代码:body{background: url(image.jpg) no-repeat;background-size: 200px 200px; }。
3、浏览器运行index.html页面,此时背景图片成功被设定为200*200。
1 b