语法:
background-image:url(图片路径);
说明:
跟引入图片(即img标签)一样,引入背景图片也需要给出图片路径才可以显示。
举例:
在线测试<!DOCTYPEhtml><html><head> <metacharset="utf-8"/> <title></title> <styletype="text/css"> div{background-image:url(img/haizei.png);}</style></head><body> <div></div></body></html>
浏览器预览效果如下图所示。
css网页设计,css自多省略,字体取消选中css,css 背景适应屏幕大小,css 移动到指定div,dw中css样式水平居中,检测是否支持css3
分析:
怎么回事,为什么背景图片没有显示出来呢?这是因为大家没有给div元素定义width和height,此时div元素的宽度和高度都为0,那背景图片肯定不会显示啊!
大家需要为div元素添加width和height,代码如下:
div{width:250px;height:170px;background-image:url(img/haizei.png); }
其中width和height跟图片实际宽度和高度相等,此时在浏览器预览效果如下图所示。
css网页设计,css自多省略,字体取消选中css,css 背景适应屏幕大小,css 移动到指定div,dw中css样式水平居中,检测是否支持css3
背景图片跟图片是不一样的,背景图片是使用CSS来实现,而图片是使用HTML来实现。两者的使用场合也不一样,大多数情况下都是使用图片来实现,不过某些场合无法使用图片时大家再考虑背景图片形式。
此外还有一点要说明一下:下面这两种引入背景图片的方式都是正确的,一个给路径加上了引号,另外一个没加引号。不过在实际开发中,建议采用不加引号的方式,因为这种方式更加简洁。
/*方式1:路径加上引号*/background-image:url("img/haizei.png");/*方式2:路径没加引号*/background-image:url(img/haizei.png);