logo标签列表

使用CSS给黑色图标添加其他颜色

cssmasking
16

我看到有些应用程序即使包含了黑色图标，也会使用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附加到此问题。

输入图像描述

你查过这个了吗？https://developer.mozilla.org/zh-CN/CSS/-webkit-mask-image，还有这个http://zh.wikipedia.org/wiki/Image_mask#Image_masks - jperelli
在 CSS 中，你应该将 'icon.png' 用引号括起来。 - Denys Séguret
嘿，大家好，我在这个问题中加入了我的真实代码。我的代码有问题吗？ - John
是的，在 CSS 中，您需要将带引号的字符串放入您的 url 中。 - Denys Séguret
好的，引号已添加。但它仍然只显示黑色图标，而不是我期望的橙色。 - John
显示剩余2条评论
2个回答
23

你的代码无法工作，是因为正在使用 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>​

这是一个可运行的示例。

1
完美！谢谢。 - Goor Lavi
3
尝试使用背景图片来作为您的图像，然后在第一个div中再添加另一个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>

很抱歉没有使用你的代码，我在你发布答案之前就开始工作了。

关于不透明度的想法很好。 - Budianto IP
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接