css background img无法显示

今天上午我都在研究为什么我的css中的background img 无法显示的问题。

路径为直接复制vs code中的相对路径 ,无法正常显示

首先想到的肯定是路径问题,但我使用的是直接在vs code上复制的相对路径,并且在CTRL+鼠标点击后 ,也能正常显示图片。所以第一时间我没有怀疑路径方面存在的问题。

随后我想会不会是background img所存在的这个类的问题,但当我给这个类添加background-color后可以正常显示。故排除这种情况。

在又经过了一阵思考后,我想会不会是路径中斜杠的问题。有没有一种可能css与html中斜杠的兼容性不同。由于在vscode中复制的路径中的斜杠默认是“\”,在html中可以正常使用,所以我的潜意识就认为在css中也可以正常使用。于是我抱着试一试的态度将css中的"\"更改为"/",运行后果然图片正常显示了。

html:

 两种斜杠均能正常显示

 css:

将"\"更改为"/”后图片正常显示


总结:css与html路径中的斜杠兼容性不同

html:" \ "、" / "

css:"  / "


补充:

css使用相对路径时,要相对的是css文件的相对路径,而不是html的相对路径

你可能感兴趣的:(css,html)