0

CSSだけで画像の色を変えることはできますか?

(私は透明な背景のグリフィコンを使用しており、テーマに別のシンボル [背景ではない] 色が必要です)

4

2 に答える 2

1

画像の色合いを使用できますが、期待どおりの効果が得られるかどうかはわかりません。

<figure>基本的に、要素をラップして<img/>スタイルを適用します。

/*HTML*/
<figure class="tint">  
  <img src="icon.png" width="400" height="260">  
</figure> 

/*CSS*/
.tint {  
    position: relative;  
    float: left;  
    cursor: pointer;  
}  

.tint:before {  
    content: "";  
    display: block;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    background: rgba(0,255,255, 0.5);  
    -moz-transition: background .3s linear;  
    -webkit-transition: background .3s linear;  
    -ms-transition: background .3s linear;  
    -o-transition: background .3s linear;  
    transition: background .3s linear;  
}  

.tint:hover:before {  
    background: none;  
}

デモと完全なコード サンプルについては、リンクを確認してください。

このウェブサイトでは、いくつかの異なる方法も確認できます。

于 2013-02-15T08:42:46.477 に答える
0

いいえ。これらはイメージ アイコンであるため、色を変更することはできません。これらのhttp://www.entypo.com/を使用して試すことができます。これらはフォントなので、簡単に色を変えることができます。

于 2013-02-15T08:36:40.870 に答える