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%了。
CSS2.1 之前是不能设置背景图大小的,CSS3就可以通过background-size来设定图片大小,可以是像素或者是百分比。
例如background-size:100px 200px表示把背景图片大小调整为100x200px。
要把图像应用成为背景,要使用 background-image这一 属性。当background-image 属性默认值是 none的时候,这表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
01首先看下html代码,一个空的div,什么内容都还没放上。
02为这个div写上一些美化的样式。
03刷新页面,看下效果,现在就是显示一个有边框的div。
04要用css为这个div加上背景图片,只需要加上background-image的样式,后面的值就是图片的地址了。
background-image: url(12.jpg)
05刷新页面看下现在的效果,可以看到div已经加上图片背景了。