<div>-tag 中的背景图像未显示答案

【问题标题】：background-image in <div>-tag not showing up<div>-tag 中的背景图像未显示
【发布时间】：2016-10-23 20:30:54
【问题描述】：

我已被质疑。我只是想开发自己的画廊，但一开始我就失败了：在<div> 中显示图像作为背景。我已经把我的代码颠倒过来了，搜索了网络，搜索了 stackoverflow，尽管我无法解决这个问题。

这是我的代码：

HTML/PHP

<div class="imageholder" style="background-image:url(<?php echo $picture->thumbPath; ?>);"></div>

CSS

.imageholder {
        width: 150px;
        height: 150px;
        float: left;
        background-size: fill;
        background-position: 50% 50%;
        background-repeat:no-repeat;
}

我正在遍历$picture-objects 的数组。每个对象都有一个thumbPath 作为其拇指图像。路径是正确的。多次检查。

这是 Firebug 的输出：

<div class="imageholder" style="background-image:url(./users/basti/img/20130825155015-tb-From Peth to Darwin/thumb/20130825155015-tb-DSC_0316_REZ.jpg);"></div>

我已经想到路径格式错误，尽管我在其他一切正常的项目上使用相同的文件路径。甚至显示与background-image 的div-tag 相同的图片；）很搞笑，不是吗？

您知道我的代码有什么问题吗？谢谢！

【问题讨论】：

您使用的是相对路径，请确保您的 HTML 输出（文件）和users/ 文件夹在同一级别。
它们是，正如我所说，我在另一个文件中使用与上面相同的路径，一切正常！
网址没有指向您的图片。如果我使用占位符，例如 placekitten.com/150/150 ，一切都会按预期工作。您可以在您的开发者控制台中检查它尝试加载的网址。
ff 的 webconsole 告诉我 css 忽略了参数 background-image 因为它不正确。 ://
您的路径包含空格(20130825155015-tb-From Peth to Darwin/thumb/) ?尝试用下划线替换它们

标签： php css html background-image

【解决方案1】：

您的图片路径中似乎有一些空格字符，请尝试将您的路径放在引号中：

url('./users/basti/img/20130825155015-tb-From Peth to Darwin/thumb/20130825155015-tb-DSC_0316_REZ.jpg');

作为替代方案，您可以将空格转换为%20，只需通过str_replace()：

background-image:url(<?php echo str_replace(' ', '%20', $picture->thumbPath) ?>);

（rawurlencode() 是 URL 的编码方式，但在这种情况下，所有的 正斜杠都会被转换。）

【讨论】：

这比编辑我的源代码的另一端更容易:)。编辑：关于您的编辑：我的文件系统中的路径已经〜空间〜，所以我宁愿用引号

【解决方案2】：

我的路径包含空格。刚刚删除它们，它就起作用了！

【讨论】：

【解决方案3】：

style=" background-image:url(<?php echo get_template_directory_uri(); ?>/image/project1.png);

在路径<?php echo get_template_directory_uri(); ?>/之前写下这段代码

【讨论】：

style=" background-image:url(