css - 如何使用CSS制作图片叠加效果？

Question

我使用以下代码设计了一些带有 CSS 的超链接以添加背景图像(使其看起来像一个按钮):
<a class="btnImg" id="btnImgConfig" href="#"></a>

.btnImg {
    width:100px;
    height:100px;
    display:inline-block;
    border:1px solid #e4e4e4;
}

.btnImg:hover {
    opacity: .2;
    background-color: #878787;
}

#btnImgConfig {
    background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}

如您所见，我试图在鼠标悬停时为图像创建更暗的效果。这是想要的效果:



但是目前效果是这样的:



我知道我可以通过用较暗的版本替换悬停时的图像来轻松地做到这一点。但不知何故，我觉得在这种情况下不应该这样做。除了上面提到的，我也试过rgba{..}悬停。然而，这根本没有效果。

这是一个 JSFiddle上面的代码。

Answer 1

您也可以使用伪元素，然后覆盖。这将为您提供所需的效果。

.btnImg {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid #e4e4e4;
  position: relative;
}
.btnImg:hover::after {
  background-color: #878787;
  opacity: 0.4;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
}
#btnImgConfig {
  background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}

<a class="btnImg" id="btnImgConfig" href="#"></a>