PNG图像上的背景混合模式 [英] Background blend mode on PNG images

问题描述

长话短说，我希望我的（任何）图像在悬停时能够更改颜色，但是我无法使其在PNG图像上正常工作。问题在于透明度。我不想将颜色应用于透明空间。我的CSS看起来像这样：

Long story short, I want my (any) image to change the color on hover, but I can't make it work well on PNG images. The problem is with transparency. I don't want to apply my color on transparent space. My CSS looks like this:

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

这里是完整的 jsFiddle示例。我只想摆脱图标周围的颜色，该颜色应该是透明的。

Here is the full jsFiddle example. All I want is to get rid of that color around the icon, which should be transparent.

推荐答案

晚6个月参加聚会但是您可以使用 mask-image CSS属性 。它的实验性但相当不错的支持：

6 months late to the party but you could use the mask-image CSS property. Its experimental but fairly well supported:

.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过滤器：

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

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

Your mileage may vary.

这篇关于PNG图像上的背景混合模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！