在css样式表里面引用background-image没有出现图片原因与解决方法

最新推荐文章于 2024-05-22 17:40:30 发布

原创最新推荐文章于 2024-05-22 17:40:30 发布 · 5.4w 阅读

44 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

浅谈前端学习

本文详细解析了CSS样式表中background-image属性在使用时遇到的问题，特别是关于相对路径与绝对路径的误解，并提供了正确引入图像的三种方法。通过实例分析，帮助开发者解决在网页开发中常见的背景图像加载失败问题。

该文章已生成可运行项目，

今天写网页的时候遇到一个问题，在样式表里面引用background-image，没有出现效果。然后查了一下是因为相对路径和绝对路径的问题，还有一个是对css样式表的引入的误解，这类文章别的博客已经有的说的比较清楚了。我现在也想按我的思路记录下来对我来说更有可读性。

在css样式表background-image：url()；失效的原因

比如最简单的，我建了一个文件夹名为：螺丝定制（最好是英文命名好）,例如：

<link type="text/css" rel="stylesheet" href="css/1.css"/>

在imge文件夹下面有一张照片为background.png.然后我想在1.css里面写样式的时候引入一个background-image:url（）；例如这样：
background-image: url(https://blog.csdn.net/"image/background.png")。

效果是不显示的，这个错误源于对外部CSS文件的一个误解。我一直以为，当在html中引用外部样式表后，那么在样式表文件中定义的样式就相当于在html头文件中定义的样式了。但事实证明并非如此，它依然存放在定义的文件中被一起下载到客户端。这一点从background-image的url属性定义的实践上也可以清楚地看出，在定义url时，如果是绝对地址当然没什么问题，如果是相对地址，那么，一定要相对css/1.css所在的路径，而不必考虑即将引用它的html文件的路径。
所以要解决的话有三种方法：

1.用相对路径。那就这样：在html的头部写样式，就可以相对于html文件的图片的路径了。
```
<style>
```
.ad{
background-image: url(https://blog.csdn.net/%E2%80%9Cimage/background.png%E2%80%9D);
/background:#eb4f38;/
```
font-size: 20px;
```
font-weight: bold;
color: white;
height: 57px;
width:400px;
}

2.用相对于1.css文件路径，那就要相对于1.css文件的背景图片路径，对于html文件来说，该图片的引入与它无关啦。像这样写： .ad{ background-image: url(https://blog.csdn.net/"../image/background.png") }

3.用绝对路径：比如f:/河源/螺丝定制/image/background.png.(这种方式我没有试过，理论上是可以的。)
下面总结一下相对路径和绝对路径的写法：（抄自百度知道）

相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。 

1 两个文件在同一个文件夹下，直接写文件名即可 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html 
在info.html加入index.html超链接的href应该这样写：index.html 

2 要引用的文件在下一级文件夹下，文件名前加子文件夹名称 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html 
在info.html加入index.html超链接的href应该这样写：html/tutorials/index.html 

3 要引用的文件在上一级文件夹下，文件名前加../ 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html 
在info.html加入index.html超链接的代码应该这样写：<a href="../index.html">index.html</a> 

举一反三：  ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 

4 更复杂的情况： 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\html\index.html 
在info.html加入index.html超链接的代码应该这样写：<a href="../html/index.html">index.html</a> 
 我这次的文件夹适合第四种情况。我理解为，先回到它们共同的父文件下site下再找html文件夹下面的index.html。对应于我的文件夹是一样的。
 好啦，以后要是忘了怎么写得相对路径就再来看看就行。