在< div> - 标签中的背景图片未显示 [英] background-image in <div>-tag not showing up

问题描述

提出质疑。我只是想开发自己的画廊，但是我已经失败了在一开始：显示一个图像作为背景在< div> 。我已经把我的代码倒置，搜索网络，搜索stackoverflow，虽然我不能解决这个问题。

这是我的代码：

HTML / PHP

 < div class =imageholderstyle =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 - 对象。每个对象都有一个 thumbPath 用于其缩略图。路径是正确的。

以下是Firebug的输出：

  < div class =imageholderstyle =background-image：url（./ users / basti / img / 20130825155015-tb- From Peth to Darwin / thumb / 20130825155015-tb-DSC_0316_REZ.jpg）;> / div> 
  

我已经想到了路径格式错误，虽然我使用相同的文件路径另一个项目，其中一切工作。甚至显示与 div-tag 的背景图像相同的图片;）搞笑，不是吗？

你有什么想法我的代码有什么问题吗？谢谢！

解决方案

似乎在你的图像路径中有一些空格字符，尝试把你的路径引用：

  url（'./ users / basti / img / 20130825155015-tb-从Peth到达尔文/ thumb / 20130825155015-tb-DSC_0316_REZ.jpg '）;作为替代方法，您可以将空格转换为％20  c $ c>，只需  str_replace（） ：
  background-image：url（< ？php echo str_replace（''，'％20'，$ picture-> thumbPath）？>）; 
  
（  rawurlencode（） 是编码URL的方法，但在这种情况下所有将被转换。）
 
im outquestioned. I just wanted to develop my own gallery, but then I already failed at the very start: Displaying an image as a background in a <div>. I have turned my code upside down, searched the web, searched stackoverflow, though I'm not able to solve the problem. 

Here's my code:

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;
}
I'm iteration through an array of $picture-objects. Each object has a thumbPath for its' thumb image. the paths are correct. checked them multiple times.

Here's the output of 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>
I already thought of the path having the wrong format, though I'm using the same file paths on an other project where everything works. even displaying the same picture as a background-image of a div-tag ;) Hilarious, isn't it?

Do you have any idea what's wrong with my code? Thanks!
解决方案
It seems there are some space characters in your image path, Try to put your path in quote:
url('./users/basti/img/20130825155015-tb-From Peth to Darwin/thumb/20130825155015-tb-DSC_0316_REZ.jpg');
As an alternative, you can convert the spaces to %20, simply by str_replace():
background-image:url(<?php echo str_replace(' ', '%20', $picture->thumbPath) ?>);
(rawurlencode() is the way to encode URL, but in this case all the forward slashes will be converted.)

                        
这篇关于在&lt; div&gt;  - 标签中的背景图片未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！