使用CSS給一個黑色的圖標另一種顏色

我看到一些應用程序，即使包含黑色圖標，一些應用程序如何使用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。

enter image description here

來源

2012-05-29 John

你看過嗎？ https://developer.mozilla.org/en/CSS/-webkit-mask-image，並且這個http://en.wikipedia.org/wiki/Image_mask#Image_masks – jperelli

你應該引用'icon.png'的css。 –

嘿，夥計們，我將真實的代碼添加到了這個問題中。我的代碼有問題嗎？ – John

您的代碼不起作用，因爲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>

這裏是它的一個working sample。

來源

2012-05-29 17:13:15

偉大的作品：謝謝 –

嘗試使用背景圖片爲您的圖像，然後使用另一個DIV的第一個內部應用Alpha

<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工作在您發佈之前

來源

2012-05-29 16:58:56

好主意，在不透明 – budiantoip

使用CSS給一個黑色的圖標另一種顏色

回答

相關問題