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 に答える