我看到一些应用程序尽管包含黑色图标，但有些应用程序如何使用 CSS 将图标转换为不同的颜色。我似乎无法重复这个过程
这是我的 back.css 文件：
.dashboard-buttons a {
width: 80px;
height: 80px;
border: 1px solid #ccc;
margin: 0px 5px;
display:inline-block;
border-radius: 10px;
background:white;
text-decoration:none;
-moz-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25);
}
.dashboard-buttons a:hover {
text-decoration:underline;
}
.dashboard-buttons span,
.dashboard-buttons img {
display:inline;
font-size: 12px;
font-weight:bold;
}
.dashboard-buttons .sessions img {
background-color:#C60;
}
.dashboard-buttons .sessions img {
-webkit-mask-image:url(mobile/images/calendar2.png)
}
html 代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="back.css" />
<title>West</title>
</head>
<body>
<div class="dashboard-buttons">
<a href="sessions.php" class="sessions">
<img src="mobile/images/calendar2.png">
<span>Sessions</span>
</a>
</div>
</body>
</html>
但它在我的 chrome 浏览器中不起作用。我错过了什么吗？
补充笔记我只需要支持现代的 webkit 浏览器。无需担心 IE 或其他任何问题。
我在这里发布了我的代码http://jsfiddle.net/ZnbF3/ http://jsfiddle.net/ZnbF3/。第一次使用 jsfiddle，希望它能工作吗？如果没有，只需复制我上面已经发布的 html 文件和 css 文件。我有这个问题附带的calendar2.png。
