【发布时间】：2013-08-31 23:02:52
【问题描述】：
嘿伙计们，我只是想知道如何在图像上进行悬停并将图像淡化为不透明度为 0.5 的颜色。也有居中的文本。我知道怎么做我只是不确定它是纯粹的css还是需要jquery？感谢大家对此的帮助。
【问题讨论】：
【发布时间】：2013-08-31 23:02:52
【问题描述】：
像这样：
<img src="http://i.imgur.com/o7iAFMu.jpg" width="100px" class="test"/>
.test:hover {
opacity: 0.5;
}
你希望文本去哪里？
根据评论进行编辑：
我认为你需要将图像包装在容器 div 中。
<div id="container">
<img src="image.png"/>
</div>
#container:hover {
background: yellow;
opacity: 0.5;
}
如果您希望图像居中，您可以将 text-align:center 应用于容器 div，或者如果您希望将文本覆盖在图像上居中，我建议您将图像作为容器 div 的背景。让我确切地知道您想要什么...如果可以，请发布示例或创建小提琴。谢谢。
根据评论进行编辑。
请看看这是否可行：http://jsfiddle.net/L8xhA/4/
【讨论】：
-
我想要它在中间。哦，我希望它用不透明度为 0.5 的颜色突出显示，而不仅仅是降低图像。
-
只是要居中的文本而已。与此类似的东西，将鼠标悬停在它上面就像一个黑色的外观，中间有一些文字淡入。codepen.io/ansac/details/BHtkE
-
类似的东西，是的，谢谢。我正试图让它变得平滑，并且文本不会降低不透明度。将其嵌套在覆盖层上方并不能帮助保持 1.0 后的不透明度。