为什么 hue-rotate(180deg) 不适用于材质图标答案

【问题标题】：Why does hue-rotate(180deg) not work with material icons为什么 hue-rotate(180deg) 不适用于材质图标
【发布时间】：2018-10-31 13:37:04
【问题描述】：

#inverted{
    filter:hue-rotate(180deg);
    -webkit-filter:hue-rotate(180deg);
    -moz-filter:hue-rotate(180deg);
    -ms-filter:hue-rotate(180deg);
}

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<a class="material-icons">settings</a>
<a class="material-icons" id="inverted">settings</a>
</body>
</html>

在代码中，我两次使用了 material-icons 的设置图标。对于第一个设置图标，我没有使用任何样式。对于第二个设置图标，我将 css 过滤器属性设置为色相旋转（180 度）。但是 hue-rotate(180deg) 对它没有任何影响。我知道要获得与filter:hue-rotate(180deg) 相同的效果，我可以做到color:white;background-color:black。但我想知道为什么 hue-rotate(180deg) 没有反转图标的颜色？有没有其他反转颜色的方法适用于白色和黑色。

【问题讨论】：

标签： html css material-design

【解决方案1】：

实际上hue-rotate 确实有效，但black 和white 不是色轮上的颜色。

#inverted {
  filter: hue-rotate(90deg);
}

.material-icons {
  color: blue;
}

<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <a class="material-icons">settings</a>
  <a class="material-icons" id="inverted">settings</a>
</body>

</html>

如果你想改变白色 ==> 黑色（反之亦然）你需要filter:invert(100%)

见：MDN

【讨论】：