我看到一些应用程序,即使包含黑色图标,一些应用程序如何使用CSS将图标转换为不同的颜色。我似乎无法重复这一过程使用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/。第一次使用jsfiddle,希望它工作?如果没有,只需复制上面已经发布的html文件和css文件即可。我有附加到这个问题的calendar2.png。
你看过吗? https://developer.mozilla.org/en/CSS/-webkit-mask-image,并且这个http://en.wikipedia.org/wiki/Image_mask#Image_masks – jperelli
你应该引用'icon.png'的css。 –
嘿,伙计们,我将真实的代码添加到了这个问题中。我的代码有问题吗? – John