文章/答案/技术大牛

发布

社区首页 >问答首页 >背景-<div>中的图像-标记未显示

问背景-<div>中的图像-标记未显示
EN

Stack Overflow用户

提问于 2013-08-26 00:30:47

回答 3查看 17.6K关注 0票数 0

我被质疑了。我只想开发自己的图库，但一开始就失败了:在<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>

我已经想到了路径的格式是错误的，尽管我在另一个项目中使用了相同的文件路径，在这个项目中一切都可以正常工作。甚至显示与div-tag的background-image相同的图片;)很搞笑，不是吗？

你知道我的代码出了什么问题吗？谢谢!

php

css

html

background-image

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-08-26 00:49:15

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

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

另一种方法是，只需通过str_replace()将空格转换为%20

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

(rawurlencode()是对URL进行编码的方式，但在本例中，所有正斜杠都将被转换。)

票数 1

Stack Overflow用户

发布于 2013-08-26 00:48:46

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

票数 0

Stack Overflow用户

发布于 2016-10-23 16:23:12

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

在path <?php echo get_template_directory_uri(); ?>/之前编写此代码

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18431171

复制

相似问题

问背景-<div>中的图像-标记未显示
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景-<div>中的图像-标记未显示EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景-<div>中的图像-标记未显示
EN