本地图像使用 content: url() 时不显示图像，但对于 Web url 会显示。为什么？ [关闭]答案

【问题标题】：No image appears when using content: url() for a local image, but it will appear for a web url. Why? [closed]本地图像使用 content: url() 时不显示图像，但对于 Web url 会显示。为什么？ [关闭]
【发布时间】：2016-02-22 22:07:03
【问题描述】：

我正在尝试将此图像变成一个按钮。它在通过网站 URL（不是我的网站）获取图像时有效，但在使用相对路径时无效。图像根本不会出现。

例子：

.my-class {
     content: url(http://themedemo.wpeka.com/wp-content/themes/apppress/images/icons/included/color.png);
}

会起作用，但以下示例的 url 是一个文件路径，其中包含从上面的 url 下载的相同图像：

.my_class {
     content: url(/img/color.png);
}

省略或使用引号不会导致任何成功。

我的文件夹如下所示： -CSS->styles->general->style.css -color.png

因此，出于测试目的，我将 color.png 和 CSS 文件夹放在项目的同一级别。

我在尝试时成功了：

contents: url(../../../color.png);

但不是：

contents: url(/color.ong);

编辑： 我是个白痴。谢谢你们的帮助 - 它实际上点击了我的大脑。

【问题讨论】：

您确定相对于样式表的路径正确吗？我注意到你有一个领先的/。
你想念那里的引号'xx' .... background-image: url('../../images/image.png'); ?
我通过做内容让它工作： url(../../../color2.png) 为什么根路径方法不起作用？喜欢：内容：url(/folders/file.png)

标签： html css

【解决方案1】：

如果你的网站文件路径是这样的：

CSS

www.YourWebsite.com/css/yourCss.css

你的图片在这里：

www.YourWebsite.com/images/yourImage.png

你的相对路径是

../images/yourImage.png

../ 返回一个文件夹，然后以images/ 文件夹为目标。

另请注意，第一个示例中的图像文件夹是 /images/，而在您的相对路径示例中，您使用的是 /img/

【讨论】：

这两个路径是无关的，除了 png 文件。第一个是来自其他网站的图像。第二个是我机器中的相对路径。
@8protons 您正在尝试连接您机器上的图像？您是否使用您的机器作为服务器来托管您的 wordpress 网站？
所以我看到该网站在 Godaddy 上，您需要将图像上传到 godady，然后从那里定位图像，您将无法从 Godaddy 网站定位您的本地计算机

【解决方案2】：

请再次检查文件的正确路径，或尝试从文件路径中删除/，然后重试。 .如下

.my_class {
     content: url(img/color.png);
}

这里是when to to use forward slash

【讨论】：