#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过滤器属性设置为色调旋转(180度(。但是色调旋转(180度(对它没有任何影响。我知道要有filter:hue-rotate(180deg)的效果，我可以做color:white;background-color:black。但我想知道为什么色调旋转(180度(没有反转图标的颜色？有没有其他方法可以反转白色和黑色的颜色。
实际上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