200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > CSS设置了正确的背景图片位置 网页上却显示不出来?

CSS设置了正确的背景图片位置 网页上却显示不出来?

时间:2021-05-30 10:41:53

相关推荐

CSS设置了正确的背景图片位置 网页上却显示不出来?

关于CSS中设置背景图片但在网页上未显示做如下笔记,和大家分享.. 如有说的不对或不恰当的地方,希望读者指出,共同进步。

今天在写一个小项目的时候在一个点上疑惑了许久,明明我的背景图片路径设置的不会错,可是为什么在网页上显示不出来,也没有行成代码覆盖;按F12显示竟然在报错!报错内容是这样子的:

大概的意思就是没有找到图片路径,怎么可能,明明路径是对的;

现在看一下我是怎么放置文件的;

gen目录下 ->

css文件夹–>

index.css

images文件夹 - >

index_images文件夹–>

img.png

index.html

我们先采用样式表嵌入式的写法:

ele{ background: url("./images/index_images/img.png"); }

这样写是没有问题的,可以显示背景图片;

现在采用使用 LINK标签,引入外部CSS文件的方法:

还是一样的内容:

ele{ background: url("./images/index_images/img.png"); }

结果–呐呢!!!背景图片没有显示,这又是为什么呢,明明在前面嵌入式都可以显示,为什么改成外嵌式就显示不了呢???

查找了相关资料后才恍然大悟:在我们设置路径时,到底是相对哪个文件的路径来找。

在我们采用样式表嵌入式的写法的时候,我们是以当前的index.html网页做相对文件,来设置引入图片的路径,所以设置图片路径的时候只要用 ./ 来表示当前同级images文件夹下的图片;但是当我们采用外嵌式的写法,应当是以我们当前的index.css文件所在路径做为相对路径找起。即图片路径应该设置为:

ele{ background: url("../images/index_images/img.png"};

此时的图片应该为当前index.css文件的上一级css文件夹的同级images文件夹下的图片;

感谢阅读

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。