Question

这是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结构的情况下在图像上显示它。

Answer 1

你可以试试这个：

Demo: show on hover

Demo 2

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

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

Answer 3

这是http://jsfiddle.net/33g7e/6/`">code

黑色图像正好在另一个图像上方。

显示父容器对子img的背景

3 个答案: