使用 CSS 为黑色图标赋予另一种颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10803217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS to give a black icon another color
提问by John
I saw some apps where even though a black icon was included, some how the app used CSS to convert the icon into a different colour. I can't seem to repeat this process
我看到一些应用程序即使包含黑色图标，也看到应用程序如何使用 CSS 将图标转换为不同的颜色。我似乎无法重复这个过程
Here's my back.css file:
这是我的 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)
}
And the html code looks like this:
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>
But it's not working in my chrome browser. Am i missing something?
但它在我的 chrome 浏览器中不起作用。我错过了什么吗？
Additional notesI only need to support modern webkit browsers. Don't need to worry about IE or anything else.
附加说明我只需要支持现代 webkit 浏览器。不需要担心 IE 或其他任何东西。
I posted my code here http://jsfiddle.net/ZnbF3/. First time using jsfiddle, hopefully it's working? If not, just copy the html file and css file i already posted above. I have the calendar2.png attached to this question.
我在这里发布了我的代码http://jsfiddle.net/ZnbF3/。第一次使用 jsfiddle，希望它有效吗？如果没有，只需复制我已经在上面发布的 html 文件和 css 文件。我在这个问题上附加了 calendar2.png。
回答by Erick Petrucelli
Your code isn't working because the srcattribute is being used to show up the black version on top of the orange version. You will be able to get the desired result only with CSS, this way:
您的代码不起作用，因为该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'); }
Here is the changed HTML snippet:
这是更改后的 HTML 片段：
<div class="dashboard-buttons">
<a href="sessions.php" class="sessions">
<div class="img"></div>
<span>Sessions</span>
</a>
</div>?
And here is a working sampleof it.
这是它的一个工作示例。
回答by Gaddiel Sadoc Peralta
Try use background image for your image, then use another div inside the first one to apply the alpha
尝试为您的图像使用背景图像，然后在第一个 div 中使用另一个 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 for not using your code, i started to work in your awnser before you posted it
抱歉不使用您的代码，我在您发布之前就开始在您的 awnser 中工作
