Question

我在图像上面有一个透明的div。我想这个div会隐藏图像，即使

它是透明的。我尝试过使用z-index，但它没有用。

感谢。

尝试使用z-index:1;属性，但无效。链接到jsfidle：

http://jsfiddle.net/Z7u8S/3/

我要完成的是我有一个包含大量列表项的未排序列表。通过触摸滑动div我希望它下面的div（带图像）显示出来。问题是上层div的背景需要透明，否则我没有问题。

Answer 1

最好通过将图像的css设置为＆＃34; visiblity：hidden＆＃34;来隐藏图像。而不是用另一个元素来掩盖它。

示例：http://jsfiddle.net/yuH7E/

<img style="visibility:hidden;" src="whatever" />

Answer 2

如果你的意思是叠加，那就试试吧。使用悬停效果来演示它。

CSS：

.checked{position:relative;width:200px;height:200px;border:1px solid red;}
.checked img{max-width:100%;}
.checked div{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.6;background:transparent;}
.checked:hover div{background:#BFBFBF;}

HTML：

<div class="checked">
    <img src="http://www.vacul.org/extension/site/design/site//images/anonymous-user.png" />
    <div></div>
</div>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/183/

Answer 3

试试如下 HTML

<div id="mask"> <img src="http://arcadeflip.com/styles/acidtech/imageset/logo.png"> </div>

CSS

    #mask{
background-color:red;
    z-index:2;
}
img{
 position:relative;
z-index:-1;
}

检查http://jsfiddle.net/arshidkv12/S6dHS/

在图像顶部的透明div

3 个答案: