我在更改按钮内的图像颜色方面遇到了麻烦。
这是图像。
我想在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/
答案 0 :(得分:2)
原始代码没有多大意义。
这里有一个带有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;
}
答案 1 :(得分:1)
最好使用像fontawesome这样的字体作为图标。这样你就可以轻松改变颜色。或使用过滤器,请参阅:Change color of PNG image via CSS?。
答案 2 :(得分:0)
您可以将正在使用的实际图像文件链接到jsfiddle吗?
答案 3 :(得分:0)
试试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建议(没有足够的代表评论)
答案 4 :(得分:0)
试试这个
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 /
答案 5 :(得分:-1)
为什么不使用photoshop改变图像的颜色?