在子 img 上显示父容器的背景答案

【问题标题】：Show parent container's background over child img在子 img 上显示父容器的背景
【发布时间】：2014-06-26 21:37:44
【问题描述】：

这是 HTML 示例：

<div class="container">
    <ul class="menu">
        <li><img src="http://i.imgur.com/XecoFpD.jpg" /></li>
    </ul>
</div>

CSS：

.container {
    background: url('http://i.imgur.com/mQ0MeUc.png') no-repeat left top transparent;
    display: block;
}
ul.menu {
    padding: 0;
    width: 400px;
    height: 300px;
}
ul.menu li {
    list-style: none;
}

img 元素下有一个隐藏的背景（黑条），去掉 img 就可以看到。所以我需要在不改变html结构的情况下将它显示在图像上。

【问题讨论】：

确切地说是
- 。我更新了代码。
我还不知道为什么，但是 CSS 代码中 .container 的 background 属性显然不起作用。
是的，我添加
它仍然不适合我@OptimusPrime
@OptimusPrime 做了一个演示。检查我的答案。

标签： javascript html css

【解决方案1】：

你可以试试这个：

Demo: show on hover

Demo 2

<div class="container">
    <ul><li><img src="http://i.imgur.com/XecoFpD.jpg" /></li></ul>
</div>

【讨论】：

在此演示中，它仅在您将鼠标悬停在其上时才有效。

【解决方案2】：

这是 CSS 代码。检查 DEMO。

ul.container li img {
    display:block;
    position:relative;
    z-index:-1;
}

.container{
background: url('http://i.imgur.com/mQ0MeUc.png') no-repeat left top transparent;
}

HTML 代码是

<ul class="container">
    <li><img src="http://i.imgur.com/XecoFpD.jpg" /></li>
</ul>

【讨论】：

我更喜欢jsbin 而不是jsfiddle。您可以在jsbin 上立即看到结果。

【解决方案3】：

这里是 http://jsfiddle.net/33g7e/6/`">代码

黑色图像正好位于另一张图像之上。

【讨论】：