Question

我想知道添加

后图片没有显示的原因

      .image_container img {
        background: url(http://domainname.com/something_something_2014_something/something_something_1320_something/something_something.jpg);
        width: 900px;
        height: 500px;
        cursor: pointer;
    }

内联CSS中的

。这套小规则应该是风格

                    <div class="image_container">
                        <img>
                    </div> <!-- end image_container -->

图像没有显示但是当我删除

时

background: url()

并添加

src=""

到

<img>

标签然后图像正常显示。

有人可以向我解释这种现象吗？我认为它看起来很合乎逻辑，我在div中设置了一个元素 - 并在更适合它的部分中设置了这个元素的定义 - 内联CSS。

我已经仔细检查过CSS是否正确放入

<head>

标签以及双重检查放置图像的目录。

Answer 1

您无法为img代码添加背景信息。

（事实上你可以，但 background -image会在src - 标记的后面显示。如果您有半透明图像，可以使用它来获得特殊效果）

解决方案

尝试将背景添加到div中：http://jsfiddle.net/aoy95s75/

HTML：

<div class="image_container"> <img src=""> </div> 

CSS：

.image_container { background-image: url(http://www.imag.de/images/10_welt_startseite.png); width: 900px; height: 500px; cursor: pointer; display: block; }

在这种情况下，您可以删除<img> - 标记，然后写下

<div class="image_container"></div> 

Answer 2

使用另一个div而不是img标签并相应地更改你的css（.img-container .img）：

＆＃13;

<div class="image_container">
  <div class="img"></div>
</div> <!-- end image_container -->

＆＃13;

Answer 3

我想你错过了昏迷,

用这个替换你的css

.image_container img {
        background: url('http://domainname.com/something_something_2014_something/something_something_1320_something/something_something.jpg');
        width: 900px;
        height: 500px;
        cursor: pointer;
    }

参考结帐此Link

希望这有帮助..

Answer 4

对于仍然试图理解这种现象的所有可怜的灵魂 - 输入：

display：block;

神奇地出现了图像:) 但是，请遵循我在研究互联网时学到的一个简单规则 - HTML用于内容，CSS用于设计风格。从不相反。

为什么在定义背景时不显示图像：CSS中的url（）规则，但在将'src'属性添加到<img/>标记时显示？

4 个答案:

解决方案