1

http://jsfiddle.net/MBNZ8/32/

我正在尝试在使用实际图像时模拟设置 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 定位在它上面？

4

1 回答 1

2

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

jsFiddle 演示

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

见 MDN

于 2013-10-08T22:34:05.243 回答