如何用CSS滤镜将Logo转为指定粉色剪影，hover时恢复原色？

在网页中展示一组机构Logo，多数包含多种颜色，希望默认状态下显示指定色值的粉色剪影效果，仅在鼠标hover时还原其真实色彩。

当前使用的代码如下：

body {
  background: deeppink;
}

img {
  filter: brightness(0) invert(1);
}

img:hover {
  filter: none;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png" />

目前代码可将Logo转为白色，但尝试添加hue-rotate()滤镜后仍显示白色，推测是brightness(0)的设置导致了问题，寻求解决方案。

解决方案 #

你之前的思路问题在于：brightness(0)会把图像所有颜色转为纯黑，再用invert(1)转成纯白——此时图像是无色彩信息的单色白色，hue-rotate()无法对单色调整色相，自然不会生效。

要实现指定粉色的剪影效果，我们需要先把Logo转为纯黑剪影，再通过滤镜把黑色调整为目标粉色。以下是两种可行方案：

方案一：滤镜组合法 #

通过调整滤镜参数，将纯黑剪影转为指定粉色，代码示例如下：

body {
  background: deeppink;
}

/* 这里以粉色#ff69b4为例，可根据需求调整参数匹配目标色 */
img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(93%) saturate(3000%) hue-rotate(320deg) brightness(100%) contrast(104%);
}

img:hover {
  filter: none;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png" />

参数说明

• brightness(0)：将Logo转为纯黑剪影，保留原始轮廓
• 后续的invert()、sepia()、saturate()、hue-rotate()组合：将纯黑色调整为目标粉色，可通过调整参数数值匹配任意色值。

方案二：遮罩填充法（颜色精度更高） #

如果需要100%匹配某一RGB/HEX色值，可使用mask属性保留Logo轮廓，再用背景色填充：

body {
  background: deeppink;
}

img {
  /* 用原图作为遮罩，保留Logo轮廓 */
  -webkit-mask: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png) no-repeat center/contain;
  mask: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png) no-repeat center/contain;
  /* 填充目标粉色 */
  background-color: #ff69b4;
  /* 隐藏原图 */
  width: 240px;
  height: 240px;
  object-fit: cover;
  visibility: hidden;
}

img:hover {
  /* hover时还原原图 */
  visibility: visible;
  -webkit-mask: none;
  mask: none;
  background-color: transparent;
}

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