CSS 悬停时不可见的黑色叠加
使用纯 CSS 确实可以在悬停时在图像上实现透明的黑色叠加。但是,由于定位和可见性问题,初始代码示例中提到的涉及使用覆盖 div 的方法可能不适合。
更有效的解决方案涉及使用伪元素。它的工作原理如下:
CSS 代码
.image { position: relative; /* Set dimensions as needed (or omit for responsiveness) */ width: 400px; height: 400px; } .image img { width: 100%; vertical-align: top; } .image:after { content: '\A'; /* Pseudo content to trigger browser rendering */ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */ opacity: 0; /* Initially invisible */ transition: all 1s; /* Animation transition */ } .image:hover:after { opacity: 1; /* Shows overlay on hover */ }
说明
额外功能
文本添加:
要将文本添加到悬停时的叠加层,您可以使用伪元素样式中的 content 属性。例如:
.image:after { content: 'Hover Text...'; /* Custom overlay text */ }
自定义:
您可以调整不透明度和过渡速度来修改可见性效果。此外,您可以添加背景图像或渐变来创建更复杂的叠加层。
以上是如何使用伪元素在图像悬停上创建 CSS 不可见黑色叠加?的详细内容。更多信息请关注PHP中文网其他相关文章!