Question

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

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

这是完整的jsFiddle example。我想要的是摆脱图标周围的颜色，这应该是透明的。

Answer 1

这可以用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 2

晚会结束6个月，但您可以使用mask-image CSS property。它的实验但得到了相当好的支持：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

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

Answer 3

它是一个例子

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

试试这样。看看它是否有用。我在这里使用了filter属性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

是否必须是PNG？最好你可以使用内联svg。这样你不仅可以通过css应用你选择的fill颜色，而且还可以获得基于矢量的图形的所有好处：任何尺寸和较小文件都很脆弱（请务必使用svgo进行优化）

PNG图像上的背景混合模式

5 个答案: