无法在链接上查看 CSS 背景图像答案

【问题标题】：Unable to view css background-image on links无法在链接上查看 CSS 背景图像
【发布时间】：2013-10-17 15:57:14
【问题描述】：

大家好，我希望有人可以帮助我解决我的问题

当我在本地计算机上打开我的网页时，一切正常，我可以看到图像，但是一旦我将网页上传到服务器，我就看不到图像。

所有文件位置正确，所有文件名正确，我检查了文件权限，css 文件链接正确，图片相对于 css 文件设置。

我已经 JSFiddled 代码并且它工作正常：http://jsfiddle.net/ySm2x/

但它不会显示在我的网站上 - 这是我网站的链接，图片应显示在“即将推出”文本下方：http://www.voskitag.com

可能是什么问题？

以下是我使用的 HTML 和 CSS 代码示例：

HTML 代码：

<div class="social" height="40">
<a class="example" href="#" target="_blank">Example</a>
</div>

CSS 代码：

.social {
    text-align: center;
    height: 40px;
    width: auto;
}
.example {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(image/url/relative/to/css/file);
    text-indent: -99999px;
}
.example:hover {
    background-position: 0 -40px;
}

【问题讨论】：

标签： html css image background

【解决方案1】：

您附加的 css 是正确的，所以看起来图像路径不正确（或者也是权限问题）。可能您必须再次检查这些路径是否正确。 Firebug 显示这些图像存在问题（未找到 404）：

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/instagram.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/twitter.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/youtube.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/vimeo.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/googleplus.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/tumblr.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/flickr.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/pinterest.png

您确定图片的路径正确吗？

【讨论】：

是的，图像路径是 100% 正确的，我还检查了权限问题，一切似乎都很好。

【解决方案2】：

我不知道如何解决您的问题。但是如果我试着让你的照片像这样

    http://www.voskitag.com/icons/googleplus.png

我收到以下错误（也许这有帮助）：

[www.voskitag.com] [Mon Oct 14 22:30:52 2013] [error] [client 92.106.149.238] 脚本头过早结束：f403.php 错误 500：脚本执行失败说明：服务器遇到内部错误或配置错误，无法完成您的请求。

返回此错误消息的最常见原因是：

• 文件上传模式当您通过 FTP 上传 Perl、CGI 脚本时，您应该始终使用 ASCII 模式。如果您收到“错误 500：脚本执行失败”，您应该检查您的 FTP 客户端在上传脚本时是否使用 ASCII 模式，因为如果它使用 BINARY 模式上传脚本，它们将无法在服务器上运行。错误上传模式导致的问题与不同操作系统处理“行尾”字符的方式有关。 Unix 系统使用“换行”（LF），Windows 使用“回车”（CR）和“换行”（LF）对。这就是为什么将上传模式设置为 ASCII 非常重要的原因。

• 文件权限当您通过 FTP 上传脚本时，文件权限默认设置为 755。如果您收到“错误 500：脚本执行失败”，您应该检查您的脚本是否具有 755 权限。否则，您的脚本具有较低级别的权限，并且不支持根据请求执行。 755 权限的八进制表示等于以下文本格式：-rwxr-xr-x 大多数 FTP 客户端都支持用于设置文件权限的 CHMOD 命令。如果您对脚本设置了不正确的权限，请使用您的 FTP 客户端并为所有者设置“读取、写入、执行”权限，为组和其他所有人设置“读取、执行”权限。

• 脚本错误这是执行脚本时出现“错误 500：脚本执行失败”的第三个众所周知的原因。检查您的脚本是否有任何明显的语法或编程错误，以确保您的代码没有损坏。

请记住：当您收到“错误 500：脚本执行失败”时，您应该始终检查任何文件上传问题（ASCII/BINARY）和可执行权限设置。一旦检查并验证了这些，看起来脚本中存在语法错误或其他问题。

【讨论】：

这很奇怪...我检查了文件权限，似乎没问题。可能与主机本身有关，我会尝试检查。

【解决方案3】：

好的，我发现了发生了什么...由于某种原因，当您在根服务器文件夹中使用“图标”文件夹时，它会出现问题，它会导致一些奇怪的图标列表并阻止您使用自己的图像，我'已经改名了，walla 一切正常。

【讨论】：