将叠加层添加到图像

问题描述：

如果图像悬停在图像上，我想添加叠加层。将叠加层添加到图像

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

这是它的将是什么样子

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

你可以发布你试过的代码吗？ – 2012-04-13 18:16:42

检查出来...... – 2012-04-13 18:20:29

显然当我加入这个类的时候 – 2012-04-13 18:22:54

答

我创造出了这种不覆盖一点小提琴，但只使用CSS给出了同样的效果。另外，我为了好玩扔了一些CSS过渡。基本上通过伪元素悬停显示图像背后创建一个div。这样你就可以放入你的标签，而不需要像疯狂一样创建CSS背景图片。只要换出alpha的东西，使覆盖工作的另一种方式。

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

希望那是你所期待的。

错误的方式，但它的后我！它如何消失？ – 2012-04-13 19:42:53

我用CSS转换来淡化它。如果他们的浏览器还不支持这些功能，那么它会优雅地降级，只是换掉图像上的alpha。我已经更新了小提琴，所以它现在以另一种方式工作。 http://jsfiddle.net/wesleyterry/jwXvA/ – 2012-04-13 20:05:17

因此，所有'-moz-transition：'东西都会产生很好的淡入淡出效果。 – 2012-04-13 20:06:44

答

基本上，如果它是一个覆盖，你可以假设的高度和宽度可能会是一样的。

在这个演示

我不小心使用的图像尺寸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-13 18:29:42

实际上图像叠加，但您可以更改颜色。 – Tallboy 2012-04-13 18:33:50

我修复了jsfiddle，使链接可点击 – Tallboy 2012-04-13 18:36:55

答

这是不可能只用单<a>，但你可以将<a>放入容器（跨度或div）。为容器提供所需的背景，并给a:hover一个背景色，如rgba(255, 255, 255,.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;}

将叠加层添加到图像

相关推荐