如何使用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>

Answer 2

将图像的初始不透明度设置为.2，然后在悬停时将其置于完全不透明度。

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

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

Answer 3

试试这个：

将opacity: .2;更改为-webkit-filter: brightness(0.5);

Answer 4

最简单的方法是将文本和工具放在透明背景上，并在悬停时更改背景颜色。没有不透明度或其他。没有＆＃34;！important＆＃34;用背景图像定义背景，同样分别用颜色，位置和重复。或者，将背景颜色定义为重要的（可以，它具有规定性）。

Answer 5

在当前设置中，您在所需结果中显示的内容实际上是不可能的。

如果您能够使用透明背景的png24文件，只需更改背景颜色即可更轻松地完成此操作。

#btnImgConfig {
    background-image: url("https://cdn4.iconfinder.com/data/icons/ios7-line/512/Tools.png");
    background-size:100%;
    background-color: #eee;
}
.btnImg {
    width:100px;
    height:100px;
    display:inline-block;
    border:1px solid #e4e4e4;
}
#btnImgConfig.btnImg:hover {
    background-color: #ddd;
}

有关示例，请参阅https://jsfiddle.net/zgurL5t9/。

Answer 6

您的图片具有导致此问题的默认背景颜色。尝试使用透明的PNG图像以及背景颜色属性，你应该很高兴。 我稍微更新了你的小提琴链接，供你参考：

JSfiddle

#btnImgConfig {
    background: url("http://www.jar2exe.com/sites/default/files/images/pics/config-100.png") no-repeat scroll 0 0 #f8f8f8;
}
#btnImgConfig:hover{
    background-color: #878787;
}

注意：我使用了相同尺寸的不同图片，以方便您使用。

Answer 7

假设你在这里使用透明 png。

您可以在a href中创建一个不同的元素。

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

将图像保留在链接上，但新元素上的背景颜色。 这样，不透明度不会改变原始的背景-img

CSS可能是这样的。

.btnImg {
  width:100px;
  height:100px;
  border:1px solid #e4e4e4;
  position: absolute;
}

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

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