CSS背景图片样式：background-image_CSS学习

资料来源：网络整理时间：2023/3/4 1:06:05 共计：3564 浏览

在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);

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：css3旋转的效果_CSS学习 | ·下一条：css 倾斜：skew()_CSS学习