on hover overlay image in CSS(在 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;}
这篇关于在 CSS 中的悬停覆盖图像上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:在 CSS 中的悬停覆盖图像上


- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01