css - PNG图像上的背景混合模式

Question

长话短说，我希望我的(任何)图像在悬停时改变颜色，但我不能让它在 PNG 图像上很好地工作。问题在于透明度。我不想在透明空间上应用我的颜色。我的 CSS 看起来像这样:

background-blend-mode: color-burn;
background-color: #edeb52;

这是完整的 jsFiddle example .我只想去掉图标周围的颜色，它应该是透明的。

Answer 1

派对晚了 6 个月，但您可以使用 mask-image CSS property .它是实验性的，但得到了很好的支持:

.maskedimage {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
  -webkit-mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-size: cover;
  mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  mask-mode: alpha;
  mask-size: cover;
}

.maskedimage.blue {
  background-blend-mode: luminosity;
  background-color: blue;
}

.maskedimage.red {
  background-blend-mode: luminosity;
  background-color: red;
}

.maskedimage:hover {
  background-blend-mode: multiply;
  background-color: red;
}

<div class="maskedimage original"></div>
<div class="maskedimage blue"></div>
<div class="maskedimage red"></div>

或者，您可以使用 css filters 获得类似的效果:

.filteredimage {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
}

.filteredimage.blue {
  filter: sepia(1) hue-rotate(170deg) brightness(45%) saturate(1000%);
}

.filteredimage.red {
  filter: sepia(1) hue-rotate(313deg) brightness(45%) saturate(1000%);
}

.filteredimage:hover {
  filter: sepia(1) hue-rotate(313deg) brightness(25%) saturate(1000%);
}

<div class="filteredimage original"></div>
<div class="filteredimage blue"></div>
<div class="filteredimage red"></div>

您的里程可能会有所不同。