html - 更改按钮中的图像颜色

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 个不同的类别(具有 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;
}

<button class="green"></button>
<button class="black"></button>