div中的图像不显示任何内容答案

【问题标题】：image in div doesn't display anythingdiv中的图像不显示任何内容
【发布时间】：2010-04-10 04:10:32
【问题描述】：

我正在尝试使用 css 和 html 在 div 容器中插入图像，但它不显示任何图像。

html代码：

<div id="wrapper">
<div id="quoteContainer">
 <span class="start_img"></span>
</div>
</div>

css:

#quoteContainer {
    color: #898989;
    background:#F9F9F9;
    border: solid 1px #ddd; 
    border-radius:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    margin:65px auto;
    padding:15px;
    width:500px;

}

    .start_img {
     background: url(image/img1.png); 
     border: dotted 2px black;
     width:200px;
     height:20px;
    }

除了img，连边框都不显示。我尝试在 html 中使用<img> 标记将图像插入到 div 中，但这也不起作用。代码有什么问题吗？

【问题讨论】：

标签： css image html

【解决方案1】：

这是因为 span 本质上是内联元素，不会接受任意的 width 或 height 值。您必须将其设为 block/inline-block 元素（昨天没有关于此的问题吗？）或填充内容。

如果您设置src 属性，它肯定会与img 元素一起使用。

而且，正如昨天所说，如果您希望您的空元素在整个浏览器中正确显示，请确保至少使用 &nbsp; 填充它们

【讨论】：

【解决方案2】：

span元素，作为内联元素，不能带宽和高。

您是否尝试过以下操作？

<div id="wrapper">
<div id="quoteContainer">
 <img src="image/img1.png" />
</div>
</div>

【讨论】：

我试过了。它没有用。我尝试使用
标签以及通过 css 填充图像。那也没用。
我想通了。这是因为每 10 秒后调用 quotecontainer 的 javascript 函数 [我已经这样设置了]。无论如何，非常感谢您的指点。

【解决方案3】：

您需要将跨度从内联更改：

.start_img {
     background: url(image/img1.png); 
     border: dotted 2px black;
     width:200px;
     height:20px;
     display:inline-block;
    }

然后在跨度中放一些东西。

<span class="start_img">&nbsp;</span>

【讨论】：

【解决方案4】：

如果你有一个很大的内容 & 他们浮动给那个 divs & span float/

当一个元素不能取宽度时，你必须尝试添加；

display:block;

到你的班级/

对于你的 div；

display:block;
width:204px;
height:24px;

但正如佩卡所说；

<img src="#" class="blabla" alt="img" />

工作正常//

【讨论】：

【解决方案5】：

也许您没有正确上传图片？仔细检查它和你的所有语法，因为这些看起来都是合理和明智的解释。你可以这样做：

<div id="wrapper">
<div id="quoteContainer">
 <span class="start_img"><img src="http://www.whereYouStoreimage.com/link/to/image/imag.png"/></span>
</div>
</div>

【讨论】：

@lightingwrist，感谢您的回复。但我想出了答案。请参阅 Daniel Vassallo 的回答。