Question

我想用css添加“shadow”/“cover”（我不知道如何命名）到我的div。

封面：

http://imageshack.us/photo/my-images/842/shadowon.png/

掩盖：

http://imageshack.us/photo/my-images/502/shadowoff.png/

我可以使用background-image属性使用另一个div来执行此操作，其中使用了具有较小不透明度的png文件。但我想用css解决这个问题。

有可能吗？

任何帮助都将不胜感激。

Answer 1

我会建议这样的事情：

<div class="image">
    <img src="http://desmond.imageshack.us/Himg502/scaled.php?server=502&filename=shadowoff.png&res=landing">
</div>

和

    .image {background: #000; width: 145px; height: 104px;}
    .image img {-webkit-transition: all 1s;}
    .image:hover img {opacity: 0.8;}

你可以添加一些CSS3过渡，让动画变得流畅:) http://jsfiddle.net/pRbfT/1/

Answer 2

您可以使用渐变的css3属性来实现效果。为了简化操作，您可以像这样使用css3生成器：http://www.colorzilla.com/gradient-editor/ 您还可以使用具有内部阴影设置的box-shadow来增强效果。

请注意，旧浏览器不支持该功能。

Answer 3

它接缝是纯色，因此您可以在图像顶部放置透明div。

<div class="image_wrapper">
   <div class="cover"/>
   <img src="someimage.png"/>
</div>

并使用此css

.image_wrapper {
   position: relative;
   float: left;
}
.image_wrapper .cover {
   display: none;
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0.2;
   background-color: #000;
}
.image_wrapper:hover .cover {
   display: block;
}

在旧版IE中，将鼠标悬停在非a代码上无效，因此您可以a使用div代替image_wrapper -khtml-opacity:.20; -moz-opacity:.20; -ms-filter:”alpha(opacity=20)”; filter:alpha(opacity=20); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.2); opacity:.20; 如果您想要跨浏览器不透明度，可以使用此

{{1}}

如何在div上添加“cover”/“shadow”？

3 个答案: