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
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:body{background: url(image.jpg) no-repeatbackground-size: 200px 200px}。
3、浏览器运行index.html页面,此时背景图片成功被设定为200*200。
1、首先准备一张设置为背景的图片,这边准备的是一张650px*347px的图片。
2、然后建立一个html文档,将它和背景图片放到一个文件夹中。
3、编辑html文档,这边建立一个div,设置宽度为700px,高度跟背景图一样,为347px。
4、就给div设置背景图片。
5、在浏览器中预览会发现图片平铺了,这不是想要的效果。
6、然后可以给div再加上属性,-moz-background-size:100% 100%background-size:100% 100%。
7、这样设置后就会发现背景图片拉伸至100%了。