Изменить цвет изображения в кнопке

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 разными смещением), чтобы показать, как зеленый или черный:

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>

Answer 2

Почему бы не изменить цвет изображения с помощью фотошопа?

Answer 3

Лучше всего было бы использовать шрифт, похожий на fontawesome для значка. Таким образом, вы можете легко изменить цвет. Или используйте фильтры, см.: Change color of PNG image via CSS?.

Answer 4

Вы можете связать фактический файл изображения, который вы используете, в своем jsfiddle?

Answer 5

Попробуйте 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; 
} 

Та же мысль, что @ Жан-Ив Fargeat предложил (не хватает респ комментировать)

Answer 6

попробовать этот

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/