javascript - 在子 img 上显示父容器的背景

Question

http://jsfiddle.net/33g7e/2/

这是示例 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>