Question

如果图像悬停在图像上，我想为图像添加叠加效果。

我尝试了很多方法，但图像似乎消失或保持不变。

这就是它的样子

<a id="icon"
  style="background: url(/images/layout/top/icon.gif); height:23px; width:23px; float:left; margin-right:3px;"
  href="page.php?pageid=123" title="Icon">
</a>

真的，真实地说，我所追求的是一种快速的方式来更改图像，而无需制作更多图像。

所以当没有悬停在图像上时 - 原始图像当悬停在图像上时 - 40％的颜色叠加？

先谢谢。

我尝试了什么：

a.thumbnail {
background-color:orange;
filter: Alpha(Opacity=40, Style=0); 
-moz-opacity: 40%; 
opacity: 0.4; 
}

Answer 1

我创造了一个小小提琴，它没有覆盖，但只使用CSS提供相同的效果。另外，我为了好玩而投入了一些CSS过渡。基本上通过伪元素悬停在图像后面创建一个div。通过这种方式，您可以放入标签，而无需像疯狂一样创建CSS背景图像。只需换掉alpha内容，使叠加层以另一种方式工作。

http://jsfiddle.net/wesleyterry/jwXvA/#base

希望这就是你要找的东西。

Answer 2

基本上，如果它是叠加层，你可以假设高度和宽度可能是相同的。

在这个演示中我偶然使用了大小为25的图像。改为23

http://jsfiddle.net/raU2J/7/

<div class="overlay_wrapper">
   <a href="#"></a>
   <div class="overlay"></div>
   <img src="cake.jpg" />
</div>


.overlay,
.overlay_wrapper a,
.overlay_wrapper {
  width: 25px;
  height: 25px;
  position: relative;
}

.overlay_wrapper a {
  position: absolute;
  z-index: 10;
  display: block;
}

.overlay {
  display: none;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  filter: Alpha(Opacity=40, Style=0); 
  -moz-opacity: 40%; 
  opacity: 0.4; 
  z-index: 9;
}

jquery的：

$(".overlay_wrapper").hover(
  function () {
    $(this).find('.overlay').fadeIn();
  }, 
  function () {
    $(this).find('.overlay').fadeOut();
  }
);

Answer 3

仅使用单个<a>是不可能的，但您可以将<a>放入容器（span或div）中。为容器提供所需的背景，并为a:hover提供rgba(255, 255, 255,.4)背景色。

如果这不符合您的要求，请详细说明您的要求。

Answer 4

示例演示：

html

<div class="img"><div class="overlap"></div></div>

css

.img {width:100px;height:100px;background:red;position:relative;}
.overlap { visibility:hidden;}
.hover .overlap {position:absolute;top:0;left:0;width:100px;height:100px;background:#333;filter:alpha(opacity=40); /* for IE */  -moz-opacity:0.4; opacity: 0.4;-khtml-opacity: 0.4; visibility:visible;}

添加叠加到图像

4 个答案: