1

如果他们将鼠标悬停在图像上，我想为图像添加叠加层。

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

这就是它的样子

<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; 
}
4

4 回答 4

2

我创建了一个小小提琴，它不会覆盖，但仅使用 CSS 就能产生相同的效果。另外，为了好玩，我还加入了一些 CSS 过渡。基本上在通过伪元素悬停显示的图像后面创建一个 div。这样，您仍然可以放入标签，而无需疯狂地创建 CSS 背景图像。只需换掉 alpha 的东西以使覆盖以另一种方式工作。

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

希望这就是你要找的。

于 2012-04-13T19:21:52.920 回答
1

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

在这个演示中，我不小心使用了 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();
  }
);
于 2012-04-13T18:17:20.953 回答
0

示例演示：

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;}
于 2012-04-13T18:37:12.347 回答
0

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

如果这不能如您所愿，请详细说明您的要求。

于 2012-04-13T18:19:06.350 回答