Question

我正在尝试模拟使用实际图像时设置ul背景图像的效果。我需要这样做，因为我的要求是必须打印ul的图像，而无需用户配置他们的浏览器。许多浏览器不支持在没有配置的情况下打印背景图像。

我已经采取了这样做，但我怀疑我的实现是无效的标记：

<ul>
    <img height="100" width="30" src="http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg"></img>    
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
    height: 100px;
    width: 30px;
    list-style: none;
    margin: 0;
    padding:0;
}

ul img {
    position: absolute;
    z-index: 1;
}

ul li {
    z-index: 99;
    color: red;
}

即使z-index较高，我的列表项目也不会出现在图像上。

这样做的正确方法是什么？我只是在ul之外声明图像并尝试将我的ul放在它上面吗？

Answer 1

z-index仅适用于定位元素。您可以将postition:relative添加到ul li。

jsFiddle demo

ul li {
    position:relative;
    z-index: 99;
    color: red;
}

See MDN

在ul内部的图像上叠加列表项元素而不设置为背景图像

1 个答案: