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>

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

Answer 2

这可以用 css 完成，但不幸的是浏览器支持很差（可能只有 webkit）。

https://jsfiddle.net/devefrontend/fowzemd2/2/

.image .img {-webkit-mask-box-image:'YOURIMAGEURL';}

这可能和你是同一个问题：

Is there any way to colorize a white PNG image with CSS only?

Answer 3

这是一个例子

你可以学到更多 https://www.w3schools.com/howto/howto_css_image_overlay.asp

.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {

  color: white;
  font-size: 16px;
width:400px; height:350px;
}

<div class="container">
  <img src="http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle"  ">
    <div class="text">example</div>
  </div>
</div>

Answer 4

试试这样。看看有没有帮助。我在这里使用了filter 属性。

.image {
  display: inline-block;

  
}
.image .img {
  width: 375px;
  height: 360px;
  background-image: url('http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png');
  background-size: cover;

-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

<div class="image">
  <div class="img"></div>
</div>

Answer 5

必须是PNG吗？最好您可以使用内联 svg。这样，您不仅可以通过 css 应用您选择的fill 颜色，还可以获得基于矢量图形的所有好处：在任何大小和较小的文件上都很脆（一定要使用svgo 进行优化）