仅使用 CSS 悬停在图像上的黑色透明覆盖？
Posted
技术标签:
【中文标题】仅使用 CSS 悬停在图像上的黑色透明覆盖？【英文标题】：Black transparent overlay on image hover with only CSS? 【发布时间】：2013-08-21 18:23:23 【问题描述】：每当鼠标悬停在仅使用 CSS 的图像上时，我都会尝试向图像添加透明的黑色叠加层。这可能吗？我试过这个：
http://jsfiddle.net/Zf5am/565/
但我无法显示 div。
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" />
<div class="overlay" />
</div>
.image
position: relative;
border: 1px solid black;
width: 200px;
height: 200px;
.image img
max-width: 100%;
max-height: 100%;
.overlay
position: absolute;
top: 0;
left: 0;
display: none;
background-color: red;
z-index: 200;
.overlay:hover
display: block;
【问题讨论】：
你的意思是把 :hover 放在图像 div 上，而不是覆盖 div 上？ 请注意：为什么要在叠加层上放置如此高的 Z-index？ Z 索引不是全局的；无需“破解”高值或低值来使它们起作用。 这最终帮助我解决了这个问题：jsfiddle.net/4Dfpm 不需要覆盖 div。悬停时图像的不透明度降低，下面的 div 应该有黑色背景，瞧。 【参考方案1】：我建议使用伪元素代替覆盖元素。因为不能在封闭的 img 元素上添加伪元素，所以您仍然需要包装 img 元素。
LIVE EXAMPLE HERE -- EXAMPLE WITH TEXT
<div class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" />
</div>
CSS方面，在.image元素上设置可选尺寸，并相对定位。如果您的目标是响应式图像，只需省略尺寸，这仍然可以(example)。值得注意的是，尺寸必须位于父元素上，而不是 img 元素本身，see。
.image
position: relative;
width: 400px;
height: 400px;
将img 子元素的宽度设为父元素100% 并添加vertical-align:top 以修复默认基线对齐问题。
.image img
width: 100%;
vertical-align: top;
对于伪元素，设置一个内容值并相对于.image元素进行绝对定位。 100% 的宽度/高度将确保它适用于不同的 img 尺寸。如果要过渡元素，请将不透明度设置为 0 并添加过渡属性/值。
.image:after
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
将鼠标悬停在伪元素上时使用1 的不透明度以促进过渡：
.image:hover:after
opacity: 1;
END RESULT HERE
如果你想在悬停时添加文字：
对于最简单的方法，只需将文本添加为伪元素的 content 值：
EXAMPLE HERE
.image:after
content: 'Here is some text..';
color: #fff;
/* Other styling.. */
这应该在大多数情况下都有效；但是，如果您有多个 img 元素，您可能不希望在悬停时出现相同的文本。因此，您可以在 data-* 属性中设置文本，因此每个 img 元素都有唯一的文本。
EXAMPLE HERE
.image:after
content: attr(data-content);
color: #fff;
如果content 的值为attr(data-content)，伪元素会添加来自.image 元素的data-content 属性的文本：
<div data-content="Text added on hover" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" />
</div>
您可以添加一些样式并执行以下操作：
EXAMPLE HERE
在上面的例子中，:after 伪元素用作黑色覆盖，而:before 伪元素是标题/文本。由于元素彼此独立，因此您可以使用单独的样式来实现更优化的定位。
.image:after, .image:before
position: absolute;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
.image:after
content: '\A';
width: 100%; height:100%;
top: 0; left:0;
background:rgba(0,0,0,0.6);
.image:before
content: attr(data-content);
width: 100%;
color: #fff;
z-index: 1;
bottom: 0;
padding: 4px 10px;
text-align: center;
background: #f00;
box-sizing: border-box;
-moz-box-sizing:border-box;
.image:hover:after, .image:hover:before
opacity: 1;
【讨论】：
谢谢乔希。我最喜欢这个版本。如果你想在透明的黑色之上显示一些白色文本，你会怎么做？您会添加另一个 div 并单独对其应用不透明度吗？ 是的，实际上只在悬停时。 感谢这是一个比我之前尝试过的更好的解决方案 如何将标题设置到图像的中心？top:30% 有效，see my fiddle，但对于响应式布局，最好将其设置为精确的中心。顺便说一句：感谢这个很好的答案。
@poor 这是一种响应式方法(updated example).. 它使用top: 50%/transform: translateY(-50%) 进行垂直居中。如果我的，这是另一个答案中提到的方法之一 - ***.com/questions/5703552/…【参考方案2】：
CSS3 filter
虽然这个功能只在webkit中实现，并没有browser compatibility，但还是值得一看的：
.image img
max-width: 100%;
max-height: 100%;
-webkit-transition: .2s all;
.image img:hover
-webkit-filter: brightness(50%);
JSFiddle Demo
参考文献
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html http://www.html5rocks.com/en/tutorials/filters/understanding-css/ https://developer.mozilla.org/en-US/docs/Web/CSS/filter http://davidwalsh.name/css-filters http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/关于 SO 的类似主题
How to Decrease Image Brightness in CSS Convert an image to grayscale in HTML/CSS Defined Edges With CSS3 Filter Blur【讨论】：
自 FF35 发布以来，FF 也支持过滤器：jsfiddle.net/Zf5am/1766。 老兄！！很棒的解决方案！ 这有多简单！ 应该注意filter现在似乎在大多数浏览器上都被接受了，根据这个页面：caniuse.com/?search=-webkit-filter。【参考方案3】：
你很亲密。这将起作用：
.image position: relative; border: 1px solid black; width: 200px; height: 200px;
.image img max-width: 100%; max-height: 100%;
.overlay position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5);
.image:hover .overlay display: block;
您需要将:hover 放在图像上，并通过添加right:0; 和bottom:0 使.overlay 覆盖整个图像。
jsfiddle：http://jsfiddle.net/Zf5am/569/
【讨论】：
我还建议使用 CSS3 动画为兼容的浏览器提供稍微平滑的过渡（IE 用户将不得不受苦）。【参考方案4】：这是一个在图像 div 上使用 :after 的好方法，而不是额外的覆盖 div：http://jsfiddle.net/Zf5am/576/
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" />
</div>
.image position:relative; border:1px solid black; width:200px; height:200px;
.image img max-width:100%; max-height:100%;
.image:hover:after content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);
【讨论】：
【参考方案5】：.overlay 没有高度或宽度，也没有内容，您不能将鼠标悬停在 display:none 上。
我改为将 div 的大小和位置与 .image 相同，并在悬停时更改 RGBA 的值。
http://jsfiddle.net/Zf5am/566/
.image position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;
.image img max-width: 100%; max-height: 100%;
.overlay position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px;
.overlay:hover background:rgba(255,0,0,.7);
【讨论】：
【参考方案6】：看看我在这里做了什么：http://jsfiddle.net/dyarbrough93/c8wEC/
首先，您从不设置叠加层的尺寸，这意味着它一开始就没有显示出来。其次，我建议您将鼠标悬停在图像上时只更改叠加层的 z-index。更改覆盖的不透明度/颜色以满足您的需要。
.image position: relative; width: 200px; height: 200px;
.image img max-width: 100%; max-height: 100%;
.overlay position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5
.image:hover .overlay z-index: 10
【讨论】：
【参考方案7】：您可以通过调整图像的不透明度并将图像的背景颜色设置为黑色来实现此目的。通过使图像透明，它会显得更暗。
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" />
</div>
CSS：
.image position: relative; border: 1px solid black; width: 200px; height: 200px; background: black;
.image img max-width: 100%; max-height: 100%;
.image img:hover opacity: .5
您可能还需要设置特定于浏览器的不透明度，以使其在其他浏览器中也能正常工作。
【讨论】：
【参考方案8】：我会为您的图像大小的叠加 div 提供最小高度和最小宽度，并在悬停时更改背景颜色
.overlay position: absolute; top: 0; left: 0; z-index: 200; min-height:200px; min-width:200px; background-color: none;
.overlay:hover background-color: red;
【讨论】：
以上是关于仅使用 CSS 悬停在图像上的黑色透明覆盖？的主要内容，如果未能解决你的问题，请参考以下文章