如何使用CSS创建图像叠加效果？

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

... . . 我使用以下代码设计了一些带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.

.

解决方法

. 您也可以使用伪元素然后叠加.这将为您提供所需的效果.

.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>

. . .. ...