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文件夹下的图片；

                感谢阅读

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

问题解决 | CSS设置了正确的背景图片路径，谷歌浏览器上invalid property value
首先确保图片的路径是相对于当前文件(写在css里就以那个css文件做相对,不要误以为html的相对的路径)的一些书写的注意事项: 不在同一级目录是上级目录要用 ../ (注意是两个点) 作 ...
使png 图片在网页上透明显示
周六参加webtech 第八期web交流会,讲到图片优化方面,其实涉及到一个png图片替代gif ,但是在网页中无法实现透明效果. 观察淘宝的图片,其实都是png的.解决的方案是采用png-8 实现透 ...
html div背景图片路径,css如何设置背景图片位置？
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?下面我们来看一下css设置背景图片位置的方法. 在背景图片的背景图片位置属性中,background-posi ...
php背景图片存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...
css实现网页背景图片位置不随滚动条改变
有的时候当网页的背景是一张图片,而在滚动滚动条时,我们不希望图片随着滚动条改变而是希望图片上的内容改变而图片不动,即利用css实现网页的背景图片位置不随滚动条改变效果代码如下: background ...
CSS的背景（背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定（图片附着），背景复合写法）
CSS的背景通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...
Css的背景（背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定）
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
如何设置背景图片位置
如何设置背景图片位置可以利用CSS中的 background-position 属性实现: background-position : x y ; 参数代表x坐标和y坐标,可以使用方位名词和精确 ...

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

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

最新文章

热门文章