在CSS中,我们可以使用background-image属性来为元素定义背景图片。

语法:

background-image: url(图片路径);

说明:

跟引入图片(即img标签)一样,引入背景图片也需要给出图片路径才可以显示。

举例:

在线测试<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div{background-image: url(img/haizei.png);}    </style></head><body>
    <div></div></body></html>

浏览器预览效果如下图所示。

分析:

怎么回事,为什么背景图片没有显示出来呢?这是因为我们没有给div元素定义width和height,此时div元素的宽度和高度都为0,那背景图片肯定不会显示啊!

我们需要为div元素添加width和height,代码如下:

div{    width:250px;    height:170px;    background-image: url(img/haizei.png);
}

其中width和height跟图片实际宽度和高度相等,此时在浏览器预览效果如下图所示。

背景图片跟图片是不一样的,背景图片是使用CSS来实现,而图片是使用HTML来实现。两者的使用场合也不一样,大多数情况下都是使用图片来实现,不过某些场合无法使用图片时我们再考虑背景图片形式。

此外还有一点要说明一下:下面这两种引入背景图片的方式都是正确的,一个给路径加上了引号,另外一个没加引号。不过在实际开发中,建议采用不加引号的方式,因为这种方式更加简洁。

/*方式1:路径加上引号*/background-image: url("img/haizei.png");/*方式2:路径没加引号*/background-image: url(img/haizei.png);