Używanie CSS do nadania czarnej ikonie innego koloru

Question

May 29, 2012, 06:35 PM

Używanie CSS do nadania czarnej ikonie innego koloru

Widziałem kilka aplikacji, w których mimo dołączenia czarnej ikony wykorzystano CSS do konwersji ikony na inny kolor. Nie mogę powtórzyć tego procesu

Oto mój plik 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)
}

A kod HTML wygląda tak:

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

Ale to nie działa w mojej przeglądarce Chrome. Czy czegoś brakuje?

Dodatkowe uwagi Potrzebuję tylko obsługi nowoczesnych przeglądarek internetowych. Nie musisz się martwić o IE ani o nic innego.

Wysłałem tutaj mój kodhttp://jsfiddle.net/ZnbF3/ . Po raz pierwszy za pomocą jsfiddle, mam nadzieję, że działa? Jeśli nie, po prostu skopiuj plik html i plik css, który już opublikowałem. Do tego pytania dołączam calendar2.png.