背景图片未显示 CSS答案

【问题标题】：Background picture is not showing CSS背景图片未显示 CSS
【发布时间】：2020-03-08 00:05:11
【问题描述】：

初学者，学习 HTML/CSS 基础知识我的背景图片有问题。当我用这样的外部链接对其进行编码时，它正在工作：

 background-image: url(https://furniturefusion.co.uk/wp-content/uploads/2018/07/inspiration-banner1-2.jpg);

当我使用下载的图片（相同的图片）执行此操作时，图像未显示在浏览器中。

background-image: url(/images/cover.jpg);

我假设所有其他（高度，重量）都很好，因为它正在使用 http.... 并且图像位于索引页面和样式文件夹所在的同一文件夹中。

问题出在哪里？

【问题讨论】：

【解决方案1】：

如果您的图片与 index 和 css 位于同一文件夹中，则 url 应为：

background-image: url("cover.jpg");

使用

background-image: url("/images/cover.jpg");

您指的是位于名为 images 的子文件夹中的图像（您没有该图像）显然我认为缺少的引号只是一个错字

【讨论】：

【解决方案2】：

这可能是因为您的路径现在不正确。如果你打开 chrome 开发者工具（键盘上的 F12）去网络，然后刷新页面。你应该看到那里的图像是红色的。您需要调整路径以使其正确。

网址的开头很重要。以'/' 开头的将从网站根目录开始。 '.' 将执行当前目录，'..' 将执行目录。

所以如果你的路径是：

www.example.com/images/test/cover.jpg

然后你开始：

www.example.com/css/

执行/images/test/cover.jpg 将是www.example.com/images/test/cover.jpg，因为然后启动'/' 使其从根开始。

执行images/test/cover.jpg 将是www.example.com/css/images/test/cover.jpg，因为这不是以'/' 开头的。

你可以这样做：../images/test/cover.jpg 因为这将是 www.example.com/images/test/cover.jpg

【讨论】：