ボタン内の画像の色を変更します。

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つのバージョンのボタンがあります。

ここでのアイデアは、ボタン要素のサイズを画像のボタンと同じサイズにすることです。次に、background-positionプロパティを使用してボタン要素のサイズを調整して調整しますあなたのボタンの中に正しく。ここ

は緑色または黒色のいずれかを表示するように指定した画像と（2つの異なるオフセットを有する）2つの異なるclasesを用いた例である：

ベストを使用することであろう

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

Photoshopを使用して画像の色を変更してみませんか？

Answer 3

アイコンのためのfontawesomeのようなフォント。そうすれば、色を簡単に変更できます。または、フィルターを使用してください：Change color of PNG image via CSS?

Answer 4

使用している実際のイメージファイルをjsfiddleにリンクできますか？

Answer 5

@ジャン=イヴ・Fargeatは（コメントするには十分ではない担当者）を提案したのと同じ考え方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; 
} 

を試してみてください

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/