4

高さと幅が指定されたリスト項目がいくつかあり、背景には中央部分が透明な境界線があります。各 li にはイメージが含まれます。

<ul id="reel">
    <li><img src="movie-image"></li>
    <li><img src="movie-image"></li>
    <li><img src="movie-image"></li>
</ul>

CSS:

#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; }
#reel li img { z-index:98; }

画像の上に李の背景を表示したい。z-index、私にはうまくいきませんでした。なにか提案を？

4

4 に答える 4

3

背景画像が表示されるようにli画像を遠ざける必要があるため、絶対位置とxとyの値をマイナス100以上にしてli画像を作成することをお勧めします。以下のようなもの：

#reel li { width:320px; height:327px; z-index:100; }
#reel li img { position:absolute; left: -100px; top: -100px; }
于 2012-08-07T05:34:37.937 に答える
2

擬似要素を試してください。これは、画像が 100px x 100px であることを前提としています

li {               
    display:block;
    position:relative;
    height:100px;
    width:100px;
}

li:after {
    content:"";
    width:100px;
    height:100px;
    background-color:#000;
    display:inline-block;
    position:absolute;
    left:0;
    top:0;
    background: rgba(0, 0, 0, 0.6);
}
于 2012-08-07T05:42:17.550 に答える
1

ニコラス

あなたがやろうとしていることは、コードで間違っていると思います。

このようなものを試してください http://pastebin.com/7AnSxcEh

li と div の高さと幅を同じにします。ポジショニングも追加。注文を積み重ねることができます。

于 2012-08-07T05:31:17.967 に答える
0

さて、私はこの問題の解決策を見つけたようです、

#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; position:relative;  }
#reel li img { position:absolute; z-index:98; }

ありがとう@エイドリアン

于 2012-08-07T05:29:47.400 に答える