关于 background-image:url属性显示不了图片的解决方法

发布于 2020-01-28  156 次阅读


在一次写css文件的时候,发现background-image里的图片显示不出来,检查时看了下当时url下的文件夹已有图片:

当前html里的head代码以及网页的目录结构
当前html里的head代码以及网页的目录结构
happy.css文件里关于body标签的css样式
happy.css文件里关于body标签的css样式

相信很多有这个问题的小伙伴们都是是像我上面这样写的路径,那这样背景图片是不会显示出来的。

图片或者背景显示不出来的原因,大部分都是url路径的问题。仔细回想一下,以前写css样式大部分是写在html文件里,而img里的src属性的相对地址是以当前html网页做相对文件,来设置引入图片的路径。

而在这次的外部样式css文件中,设置某个元素的background-image的url();是以当前的css文件所在路径做为相对路径找起,但在上面图片显示可以看出,背景图片background.jpg是在根部目录下的images文件夹里,所以我们要把相对路径改成:

body标签里修改后的url地址
body标签里修改后的url地址

修改后背景图片可以正常显示了。下面再补充一些有关绝对地址和相对地址的知识。

绝对URL

绝对URL(absolute URL)显示文件的完整路径,这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。

相对URL

相对URL(relative URL)以包含URL本身的文件夹的位置为参考点,描述目标文件夹的位置。
一般来说,对于同一服务器上的文件,应该总是使用相对URL,它们更容易输入,而且在将页面从本地系统转移到服务器上时更方便,只要每个文件的相对位置保持不变,链接就仍然是有效地。

以下为建立路径所使用的几个特殊符号,及其所代表的意义。

(1)./ :代表目前所在的目录,相对路径。 如:<img src="./abc" />
(2)../ :代表上一层目录,相对路径。 如:<img src="../abc" />
(3)../../ :代表的是上一层目录的上一层目录,相对路径。
(4)/ :代表根目录,绝对路径。 如:<img src="/abc" />

本站文章由渡缘人原创,如若转载请注明原文及出处:
https://www.hygrey.com/about-background-image-url-can-not-display-picture.html

万物皆有裂痕,那正是光照进来的地方
最后更新于 2020-02-13