更改按钮中的图像颜色

Question

我在更改按钮内的图像颜色方面遇到了麻烦。

这是图像。

我想在CSS中将黑色下载按钮图标更改为绿色图标？或任何其他方式使它像那样？而不是重新创建它

代码：

<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>


button{
    margin: 0px;
    padding: 0px;
    font-family:Lucida Sans MS, Tahoma;
    font-size: 12px;
    color: #000; 
    white-space:nowrap;
    width:auto;
    overflow:visible;
    height:28px;
}

button em{
    vertical-align:middle;
    margin:0 2px;
    display:inline-block;
    width:16px;
    height:16px;
    background-image: url(icon_delete.png);      
}

button em.leftImage{
    background-position: -96px -112px;
}

button em.rightImage{
    background-position: -64px -16px;

}

但输出并没有改变颜色。它仍然是黑色的。 https://jsfiddle.net/35kfu6z7/

Answer 1

原始代码没有多大意义。

这里有一个带有2个版本按钮的图像。您可以使用名为CSS Sprites的技术：https://css-tricks.com/css-sprites/

这里的想法是强制按钮元素的大小与图像上的按钮大小相同，然后使用background-position属性将其偏移以在按钮内正确对齐。

以下是使用您提供的图片和2个不同的clases（有2个不同的偏移）来显示绿色或黑色的示例：

(setq default-tab-width 2)

button{
    display:inline-block;
    width:84px;
    height:26px;
    
    background-image: url(http://i.stack.imgur.com/8aNAf.png);
    background-color: none;
    border: none;
}

button.green{
    background-position: -3px 31px;
}

button.black{
    background-position: -3px -3px;
}

Answer 2

最好使用像fontawesome这样的字体作为图标。这样你就可以轻松改变颜色。或使用过滤器，请参阅：Change color of PNG image via CSS?。

Answer 3

您可以将正在使用的实际图像文件链接到jsfiddle吗？

Answer 4

试试https://jsfiddle.net/35kfu6z7/1/

button em{
    vertical-align:middle;
    display:inline-block;
    width:29px;
    height:30px;
    background-image: url(http://imgur.com/download/vICywDr/); 
    repeat:none;
}

button em.leftImage{
    background-position: -28px, 0;
}

button em.rightImage{
    background-position: 0, 0;
}

同样的想法@ Jean-Yves Fargeat建议（没有足够的代表评论）

Answer 5

试试这个

html

<button onclick="green()";>
<div id="border">
    <div id="square">
        <div id="arrow"></div>
    </div>
</div><span>download</span>
</button>

CSS

#border {
border: 2px solid black;
border-radius: 50%;
display: inline-block;
padding: 2px 6px 6px 6px;
position: relative;
top: 5px;
}
#square {
 background: #000;
 width: 4px;
 height: 8px;
 position: relative;
}
#arrow {
  display: inline-block;
  border: 5px solid;
  border-color: black transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: -70%;
}
button span{
  line-height: 30px;
  margin: 5px;
}

javascript

 function green() {
    document.getElementById('border').style.borderColor = "green";
    document.getElementById('square').style.background = "green";
    document.getElementById('arrow').style.borderColor = "green transparent transparent transparent";
 }

见jsfiddle.net/hworm4/mpj47fLb /

Answer 6

为什么不使用photoshop改变图像的颜色？