css - 垂直菜单中 li 元素上的水印

Question

我想在 li 元素上有一个背景，但是应用一个带有绝对药水的图像ul不会让我点击这些元素。有没有比在每个 li 元素上切割图像更好的解决方案？

Answer 1

用 Lister 先生修改修改了我的答案：http: //jsfiddle.net/R222B/ 应用于列表中的第一个元素。请核实。

html:

<ul>
    <li><span> List1 </span><a href="#"><img src="http://www.aireuropa.com/waeam/en/estaticos/images/sky.png" /></a></li>
    <li><span> List2 </span><img src="http://www.aireuropa.com/waeam/en/estaticos/images/sky.png" /></li>
    <li><span> List3 </span><img src="http://www.aireuropa.com/waeam/en/estaticos/images/sky.png" /></li>
    <li><span> List4 </span><img src="http://www.ottopizza.co.uk/images/image.php?image=26.png&width=35" /></li>
</ul>

CSS：

    li
{
    display: block;
    width: 60px;
    height: 40px;
    margin: 0px;
    margin-top: 10px;
    padding; 0px;
    list-style-type: none;
}
span
{
    position: relative;
    z-index: 1;
}
img
{   
    float: left;
    width: 35px;
    height: 35px;
    position: absolute;
    margin-left: -33px;
    margin-top: -7px;
    z-index: 2;
}
a
{
    z-index: 3;
}