1

I want add "shadow"/"cover" (I'm not sure how to name it) to my div, with css.

cover on:

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

cover off:

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

I can do it with an additional div using the background-image property where a png file with a small opacity is used. But I want solve this issue with css.

It is possible?

Any help would be appreciated.

4

3 回答 3

4

我会建议这样的事情：

​<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/

于 2012-06-06T08:10:26.420 回答
0

它接缝它是纯色的，因此您可以将透明 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而不是divforimage_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;
于 2012-06-06T08:14:58.697 回答
0

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

请记住，旧浏览器不支持该功能。

于 2012-06-06T08:03:15.607 回答