在 CSS 中的悬停覆盖图像上

2022-01-22 00:00:00 image overlay hover css

我需要一个带有图片 bg 的 div 来在悬停时覆盖图像(具有一定的透明度).我需要能够有一个透明的覆盖层，可以在整个站点的任何图像上使用和重复使用.至少可以说，我的第一次尝试是迂回的.因为我发现你不能翻转一个不可见的 div 我设计了一个三明治系统，其中原始图像是第一层，叠加层是第二层，原始图像又是第三层.这样，当您翻转时，原始图像会消失，从而在原始图像上显示叠加图像:

I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll-over, the original image disappears revealing the overlay image over the original image:

http://www.nightlylabs.com/uploads/test.html

所以它起作用了.有点.由于您无法与可见性交互:不可见元素(为什么?！)除非您将光标放在它上面，否则翻转会闪烁.

So it works. Kinda. Because of you cannot interact with an visibility:invisible element (why?!) the roll-over flickers unless you rest the cursor on it.

有什么帮助吗?这种方法不好，如果有人有更好的方法，请发表评论.

Any help? This method is bad so if anyone has a better one please comment.

推荐答案

我用了下面的css，没问题.

I used the following css and its fine.

#container { position:relative; width:184px; height:219px;}
    .image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
    .overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
    .top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
    .top-image:hover { background-image:none;}

相关文章