CSS背景图像未正确显示答案

【问题标题】：CSS background image not showing properlyCSS背景图像未正确显示
【发布时间】：2014-09-01 16:58:50
【问题描述】：

我正在尝试在我的主题中放置一个帖子分隔符。我使用图像作为分隔符。但是图像没有显示出来。代码如下：

在 index.php 中我已经包含（就在循环结束之前）：

<?php
    if (($wp_query->current_post + 1) < ($wp_query->post_count)) {
        echo '<div class="post-item-divider">&nbsp Post Divider</div>';
    }
?>

CSS：

.post-item-divider {
    background-image: url("/images/capture.png");
    height: 50px;
    line-height:1px;
    width:100%;
    margin-bottom:20px;
}

但是图片没有显示。但是出现了 div 内的文本：“Post Divider”。我试图用来自网络的 url 替换图像 url，它工作正常。

【问题讨论】：

您的文件夹是如何组织的？
如果您可以将 URL 更改为不同的内容，那么您的代码就可以了。问题可能是文件路径不正确。拼写错误之类的。
确保网址正确...
如果您将宽度设置为实际像素量，您会看到什么吗？它可能会获得 0px 的 100% 宽度。否则我会说这是您尝试访问照片的方式，路径错误
它的工作。 url的相对路径有问题。应该是：images/capture.png

标签： php html css

【解决方案1】：

通过查看您的代码，我猜您正在使用 wordpress。无论如何，请确保为您提供正确的图像路径。

如果远程 URL 可以正常使用此代码，我确定 url 是错误的。确保图像在上述路径中可用。

【讨论】：

【解决方案2】：

问题在于 url 的相对路径。它应该是：images/capture.png。

我无法删除该问题，因为其他人已经回答了该问题。

【讨论】：

【解决方案3】：

这意味着您的 css 属性：背景图像：url（“/images/capture.png”）；路径不正确替换为背景图像：url（“../images/capture.png”）；通过 firebug 尝试或检查它。

【讨论】：

虽然我同意 url 与样式表的来源有关，但在浏览器中对其进行测试对您没有多大帮助。在 firebug/codeinspector 中设置相对 url 只有在资源已经加载时才有效（至少在我的经验中）。