浏览器未显示图像

Question

当我更改imag.Browser的路径时不显示图像工作代码

body {
background-image: url("D:\main.jpg");
background-repeat: no-repeat;
background-position : center;
background-attachment : fixed ;
}

相同的代码，但是更改图像的路径不会在浏览器中显示图像。不起作用

body {
background-image: url("D:\Source_Code\HTML\Adventure Time\main.jpg");
background-repeat: no-repeat;
background-position : center;
background-attachment : fixed ;
}

Answer 1

您应该从当前的css文件而不是从计算机的根目录提供url path 。 而且它是斜线而不是反斜线。

例如，如果您的css文件位于adventure-time目录中，请执行以下操作： background-image: url("./main.jpg");

Answer 2

尝试提供虚拟路径而不是物理路径。 例如background-image：url（“ / HTML / Adventure Time / main.jpg”）;

Answer 3

大多数url是相对的，是因为绝对url可以工作，尽管它们确实取决于操作系统。 对于可维护性而言，这是不希望的。

为了解释一个相对URL（因为您的相对URL似乎对您有用），我举了这个例子。 我将使用以下文件结构：

您的网页位于./myWebsite/您的CSS位于./myWebsite/CSS中的页面图像位于./myWebsite/Images中

然后图片的网址如下：

background-image: url("./Images/main.jpg");

网址细分：

网址由简单的不同部分组成。 第一部分是“ ./”。 这只是说些“父目录”之类的话。

因此，此行代码位于（./myWebsite/CSS/stylesheet.css）的文件的父目录将是“ ./myWebsite/”。

然后下一部分是“ Images /”。 这意味着： “选择文件夹“图像””。

因此，现在我们导航到父目录，然后选择图像所在的文件夹。 剩下要做的唯一一件事就是选择图像，这是通过指定其名称和扩展名来完成的。 “ main.jpg”。

请记住，这是基本解释