Question

我正在尝试使用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中，但这也不起作用。代码有什么问题吗？

Answer 1

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

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

而且，正如昨天已经说过的，如果您希望在整个浏览器中正确显示空元素，请确保至少填写 

Answer 2

span元素是一个内联元素，不能取宽度和高度。

您是否尝试过以下操作？

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

Answer 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>

Answer 4

如果你有一个很大的内容＆amp;他们浮起来给那些divs＆amp; span float /

当元素无法获取宽度时，您必须尝试添加;

display:block;

到你的班级/

和你的div;

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

但正如佩卡说的那样;

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

工作正常//

Answer 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>

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

5 个答案: