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

- icecub

---

你想要第一个，对吗？鼠标悬停时背景变暗，但图标本身保持为暗色？ - Vlad Pintea

@VladPintea 理想情况下最好是这样。但这不是必须的。如果图标变暗了，也不是问题。 - icecub

使用透明的 png 图像，然后在 CSS 中设置初始状态和 hover 状态的背景。 - Jose Rui Santos

你需要不透明度吗？如果PNG具有透明背景，则“background-color”应该显示出来。 - Hidden Hobbes

如果您使用的是带有透明背景的.png图像，则必须将CSS属性背景更改为另一种颜色。如果您使用的是.jpg图像，则无法仅更改图像的背景，因为CSS无法识别图像的背景和非背景部分。 - Mattia Nocerino

谢谢大家的建议。当然，我正在使用PNG格式。已经给出了一些可行的解决方案。非常感谢大家！ - icecub

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>

- Stewartside

---

这似乎也完美地运作了，而且比再次更改图像要少做一些工作。谢谢！ - icecub

Answer 2

将图片的初始不透明度设置为0.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>

- Wes Foster

---

反过来思考，真不敢相信我自己没想到这个！非常感谢。我会尝试一下，如果行得通，我会标记为已解答。 - icecub

已经测试过了，完美地运行了！非常感谢 :) - icecub

这会使初始图标非常模糊。 - Stewartside

@Stewartside 我同意。这个解决方案是可行的，但我必须更改其中的图像。因此，我认为你的答案会更好。 - icecub

Answer 3

尝试这样做：

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

- questhat23

---

这根本没有任何意义。你自己测试过吗？因为你的代码根本没有任何作用。 - icecub

@icecub 这段代码在非 WebKit 浏览器中没有任何效果。你可以使其跨浏览器，这样它就能正常工作了。 - Jose Rui Santos

啊，我明白了。我已经使用 filter: brightness(0.5); 进行了测试，它非常完美。谢谢 :) - icecub

Answer 4

最简单的方法是将文本和工具放在透明背景上，并在悬停时更改背景颜色。没有不透明度或其他类似的东西。为了使其在没有“！important”情况下工作，请使用background-image定义背景，然后将颜色、位置和重复项分别定义。或者，使用important定义background-color（没关系，这是规定的）。

- Vlad Pintea

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/，了解相关it技术的示例。

- Jeroen W

---

是的，这就是之前跟我提到的。它运行得很好。感谢你的努力。 - icecub

Answer 6

您的图片有一个默认的背景颜色，这导致了这个问题。尝试使用一个透明的PNG图片，同时使用background-color属性，您应该可以解决这个问题。

我稍微更新了您的JSFiddle链接，供您参考：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;
}

注意：我使用了一张相同尺寸的不同图片，以便您更容易理解。

- Aalok Mishra

---

虽然图片对我没有用，但你的解决方案确实有效。感谢你付出的努力。 - icecub

Answer 7

假设您在此处使用透明的PNG图像。

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

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

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

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;
}

- Robin