0

画像の上に重ねたい半透明の画像があります。そのためにHTMLとCSSをフォローしようとしていますが、画像の背景を取得できず、常に画像の背後に残ります。

.box次のコードでは、の画像の上に（赤い色）の背景を設定しようとしていliます。

HTML：

<div class="box">
    <div class="x">
    <ul>
        <li>
            <img src="http://farm9.staticflickr.com/8341/8283881151_aa0735d1fc.jpg" />            
        </li>
    </ul>
    </div>
</div>

CSS：

.box{
    background: red;
    position: relative;
    z-index: 2
}


li{
    position: relative;
    z-index: 1;
}

デモ

4

2 に答える 2

1

問題は、画像がボックス内にあることです。したがって、ボックス内のすべてのものにボックスが付属しているため、ボックスのz-indexを上げても画像の上には表示されません。

これを修正するには、ボックスの外側にある別のdivに画像を配置してから、ボックスをその上に配置できるようにします。

更新：これは2つのdivを定義します。 .boxの上に半透明になります.x。

.box{
    background: red;
    opacity: 0.4;
    position: absolute;
    height: 500px;
    width: 500px;
    z-index: 2
}

.x {
    position: absolute;
    z-index: 1;
}

Jsfiddleの例。

于 2012-12-19T11:12:18.273 に答える
1

画像と同じレイヤーにボックスを設定する必要があります。

次に例を示します。フィドル

HTML：

 <div id="container">
     <div id="box"></div>
     <img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png"
 width=200 id="overlay"></div> 
</div>​

CSS：

#container {
    position: relative;
}

#box {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    background: red;
    z-index: 1;        
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}​
于 2012-12-19T11:18:54.913 に答える