Использование 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-код выглядит так:



    
        
         West
    
    
        
    

Но он не работает в моем браузере Chrome. Я что-то пропустил?

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

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

enter image description here

14
задан Marine Le Borgne 8 May 2018 в 13:01
поделиться