css引用同文件夹下的图片
导读：在网页开发中，我们常常需要在页面里引用图片。在使用 CSS 样式设置图片样式时，有时候我们会需要引用同文件夹下的图片。那么如何正确引用才能让图片正常显示呢？下面我们就来详细解释一下。首先，在引用图片的时候，我们通常使用 CSS 的 back...
在网页开发中，我们常常需要在页面里引用图片。在使用 CSS 样式设置图片样式时，有时候我们会需要引用同文件夹下的图片。那么如何正确引用才能让图片正常显示呢？下面我们就来详细解释一下。首先，在引用图片的时候，我们通常使用 CSS 的 background-image 属性来设置背景图片。在该属性中，我们需要填写图片的路径。图片的路径一般分为三种：相对路径、绝对路径和根路径。在这里，我们讨论的是相对路径，也就是我们引用同文件夹下的图片时所需填写的路径。比如，现在我们在当前文件夹下有一个名为 “image.jpg” 的图片，我们需要在 CSS 样式中引用这个图片。那么我们需要填写的路径是什么呢？我们可以这样写：pre{
background-image: url("image.jpg");
}
其中，“url()” 中填写的就是图片的路径，我们使用双引号将其括起来，来明确表示这是一个相对路径。同样的，如果我们在当前文件夹下又有一个文件夹，名为 “img”，该文件夹中也有一个名为 “image1.png” 的图片，要引用该图片时我们可以这样写：pre{
background-image: url("img/image1.png");
}
这里的 “img/” 就表示该图片在当前文件夹中嵌套了一个文件夹，也就是该路径是相对于当前 CSS 文件所在的文件夹来定位图片的。需要注意的是，在填写路径时，不要写成绝对路径或根路径。因为当你的代码需要在不同的环境下运行时，绝对路径或根路径会失效，导致图片无法显示。如果你使用的是 HTML 标签，比如 img 标签，引用同文件夹下的图片的方法是一样的。图片的路径也是需要填写相对路径，只不过写法略有不同。例如：就可以在页面上显示同文件夹下的图片了。总之，在引用同文件夹下的图片时，只要我们填写正确的相对路径，就能够正常显示图片。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css引用同文件夹下的图片
本文地址： https://pptw.com/jishu/538568.html