Question

美好的一天。

我的结构是这样的：

/
  index.html
  style/
    main.css
  images/
  test/
    test.html

/style/main.css 说的是这样的话：

body {
    background-image: url('/images/SomeImage.png');
    background-color: #000;
}

/index.html 有一个指向此CSS文件的链接，但正如标题所示，不会加载任何图片。但它已连接，因为背景实际上是黑色的，所以其余的风格（但图像）确实有效。

另外，如果我在 /index.html 内部写入相同的样式，则会加载背景。

另外，我创建了 /test/test.html ，除了

之外什么也没说

<img src="/images/SomeImage.png" />

，图像显示在该页面上。

因此，显然，由于某种原因，我的 /style/main.css 无法访问文件，因此来自任何其他位置的任何其他文件都会到达。为什么会这样？语法显然没有错。我输了。

Answer 1

将../添加到/ images的开头，以便读取../ images / imagename.jpg

这是您的代码应该是什么：

body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}

Answer 2

尝试暂时将网页，css和示例图像复制到一个文件夹中。然后只使用图像名称为url a看看会发生什么。如果它有效，它将是图像路径，如果不是其他东西..可能位置..这是你发布的这个完整的CSS吗？

Answer 3

因为你的图像在另一个文件夹中（比你的样式表高一级），你需要从＆＃34; ../"开始;对于相对于样式表的层次结构中的级别文件夹。所以你需要一个相对的URL：

background-image: url('../images/SomeImage.png');

Answer 4

最初看起来你的代码很好。

那你怎么知道图片没有加载？查看浏览器的开发人员工具，查看图像是否正在加载，或返回错误，甚至是否被引用。我的猜测是它正在加载，但由于CSS中的某些内容而无法显示。

Answer 5

如果您在 /styles/style.css ，则需要添加：

../ 2级返回到根文件夹。

罗金回答说：

background-image: url('../images/SomeImage.png');

是这样做的方法。

要在索引文件中链接CSS，请使用以下命令：

<link href="./style/style.css" rel='stylesheet' type='text/css'>

在index.html中

./ 1级到达根文件夹。

此外，您的问题也可能是文件权限问题，当我从电子邮件下载图像并直接使用它时，我总是会遇到此问题。

如果您在Mac上本地工作：

- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**

如果您直接在实时服务器上工作：

- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image 
- Right click and select file permissions
- set permissions to : **664**

Answer 6

好的，基本上，我用无效的 /style/main.css 替换了它的副本（ test.css - 在帖子评论中描述）和现在它有效。为什么还是这个问题，但我猜这个问题有点解决了。

Answer 7

和我一样，我猜css中使用的图像必须与css文件在同一个文件夹中。我在使用浏览器工具检查时尝试了所有可能的解决方案，唯一有效的方法是将图像和样式表放在同一文件夹中。

Answer 8

我遇到了同样的问题。使用Visual Studio社区。

我去检查了浏览器中的元素，发现文件目录“自动”（我没有这样设置）说我的图像文件夹嵌套在css文件夹中。还不知道为什么...所以我随后将图像文件夹移到了css文件夹中，发现这就是我的浏览器在开发工具中向我显示的内容...

因此使用css时可能出于某些原因，图像文件夹内的图像应位于css文件夹中，而不是完整的网页文件夹。

外部CSS图像将无法加载

8 个答案: