使用CSS为黑色图标赋予其他颜色 [英] Using CSS to give a black icon another color
问题描述
我看到了一些应用程序，即使其中包含黑色图标，还是一些应用程序如何使用CSS将图标转换为其他颜色的方法。我似乎无法重复此过程
这是我的back.css文件：
.dashboard-buttons a {
width：80px;
高度：80像素；
边框：1px实心#ccc；
保证金：0px 5px;
display：inline-block;
border-radius：10px;
背景：白色；
文字修饰：无；
-moz-box-shadow：嵌入0 0 15px rgba（0,0,0，0.25）;
-webkit-box-shadow：嵌入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 = zh-CN>
< 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>会话< / span>
< / a>
< / div>
< / body>
< / html>
但是在我的Chrome浏览器中无法使用。我缺少什么吗？
其他说明我只需要支持现代的Webkit浏览器。
我在这里。
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
Here's my back.css file:
.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:
<!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?
Additional notes I only need to support modern webkit browsers. Don't need to worry about IE or anything else.
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.
Your code isn't working because the src attribute 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:
.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:
<div class="dashboard-buttons">
<a href="sessions.php" class="sessions">
<div class="img"></div>
<span>Sessions</span>
</a>
</div>
And here is a working sample of it.
这篇关于使用CSS为黑色图标赋予其他颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
