6

私の webapp には、背景が透明なグレー レベルのアイコンがいくつかあります。

そのような画像に CSS を介して色合いを与えることは可能ですか? 画像や要素の彩度や色相を操作できる何かを夢見ています。

存在しない場合、CSS の将来のバージョンについて議論されていますか?

これは私が色付けしたい画像の種類です: http://www.clker.com/clipart-transparent-arrow.html

これは私がやりたいことではありません: jQuery:画像に色(色合い)を適用する方法はありますか?

1 つの回避策は、JavaScript http://www.pixastic.com/lib/を使用することです。

4

3 に答える 3

7

以下のリンクで全文を読むことができますが、これは CSS3 であり、一部の古いブラウザでは動作しない可能性があります。

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

いくつかの例

img.icon {
      -webkit-filter: sepia(78%);
}

img.icon {
      -webkit-filter: grayscale(100%);  /* safari/chrome */
      -moz-filter: grayscale(100%); /* firefox */
      -ms-filter: grayscale(100%);  /* IE >= 9 */
      -o-filter: grayscale(100%); /* Opera, if support CSS3 */
      filter: gray; filter: grayscale(100%); /* edge browsers */ 

}
于 2012-08-18T15:32:52.087 に答える
1

アイコンの上に疑似要素をrgba()追加できます。

また、画像の代わりに Unicode 文字を使用する場合は、rgba()orhsla()を使用することもできます。

于 2012-08-18T15:44:16.683 に答える
0

グレースケール jQuery プラグインを使用できます。非常に便利で使いやすいです。

http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/

于 2012-08-18T16:21:12.220 に答える