Использование 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. Я что-то пропустил?

Дополнительные примечания Мне нужно только поддерживать современные веб-браузеры. Не нужно беспокоиться об IE или что-то еще.

Я разместил здесь свой код http://jsfiddle.net/ZnbF3/. Первый раз, используя jsfiddle, надеюсь, что он работает? Если нет, просто скопируйте html файл и файл css, который уже опубликован выше. У меня есть calendar2.png, прикрепленный к этому вопросу.

Ответ 1

Ваш код не работает, потому что атрибут src используется для отображения черной версии поверх оранжевой версии. Вы сможете получить желаемый результат только с помощью CSS, таким образом:

.dashboard-buttons .sessions .img { width: 60px; height: 60px; background-color: #C60; }
.dashboard-buttons .sessions .img { -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png'); }

Вот измененный фрагмент HTML:

<div class="dashboard-buttons">
   <a href="sessions.php" class="sessions">
       <div class="img"></div>
       <span>Sessions</span>
   </a>
</div>

И вот рабочий пример.

Ответ 2

Попробуйте использовать фоновое изображение для своего изображения, затем используйте другой div внутри первого, чтобы применить альфа

    <style type="text/css">
        #image{background-image:url(/img/2012-05-24_1834.png);width:400px;height:400px;}
        #image #image_mask{background-color:red;width:400px;height:400px;opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
    </style>

</head>


<body>

        <div id="image">
                <div id="image_mask"></div>
       </div>
</body>

sry для того, чтобы не использовать ваш код, я начал работать в вашем awnser, прежде чем вы разместили его