Question

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

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

Answer 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

为什么色相旋转（180deg）无法与材质图标一起使用

1 个答案: