我想知道为什么添加后图片不显示
.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>
标签以及仔细检查放置图像的目录。
最佳答案
您不能为 img 添加背景标签。
(事实上你可以，但是 background -image 将显示在你的图像 后面 在 src -标签中。你可以用它来特殊如果你有一个半透明的图像效果)
解决方案
尝试将背景添加到您的 div:http://jsfiddle.net/aoy95s75/
HTML:
<div class="image_container">
<img src="">
</div> <!-- end image_container -->
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> <!-- end image_container -->
关于html - 为什么图像在定义背景时不显示 : url() rule in CSS but is displaying when adding 'src' attribute to <img> tag?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26592210/