如何在使用background blend mode时忽略透明像素

我明白你的需求——你想在鼠标悬停时给哥布林PNG添加红色色调，但不想让红色影响图片周围的透明区域，之前用background-blend-mode的方案会把整个元素背景（包括透明区域）都染成红色，确实达不到预期。而且你提到之前看到的Stack Overflow方案用了-webkit-mask-box-image，没法处理复杂的图片，这个问题我来帮你解决。

这里有个可行的方案，利用现代CSS的mask属性（目前主流浏览器均支持，无需担心兼容性）来限制红色层的作用范围，只让它覆盖在哥布林的不透明部分：

.goblin {
  width: 600px;
  height: 500px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
  position: relative;
}

.goblin::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: red;
  /* 用原图作为遮罩，让红色仅出现在原图有内容的区域 */
  mask: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png") center/cover no-repeat;
  -webkit-mask: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png") center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.goblin:hover::before {
  opacity: 1;
  /* 用multiply混合模式实现自然的红色色调叠加 */
  mix-blend-mode: multiply;
}

方案原理： #

1. 我们给.goblin元素设置原图作为背景，同时用伪元素创建一个独立的红色背景层。
2. 通过mask属性，直接用原图作为遮罩，把伪元素的红色层严格限制在原图的不透明区域内，这样图片周围的透明部分不会被红色覆盖。
3. 鼠标悬停时，显示伪元素并应用multiply混合模式，让红色和原图自然叠加，完美实现你想要的色调效果。

和你之前接触的-webkit-mask-box-image方案不同，mask属性支持直接使用复杂PNG图片作为遮罩，不受图片颜色、细节复杂度的限制，完全适配你的场景。

内容的提问来源于stack exchange，提问作者satnam