CSSを使用して画像を「グレー表示」で表示する（つまり、個別のグレー表示されたバージョンの画像を読み込まずに）最良の方法（ある場合）は何ですか？

私のコンテキストは、すべてのボタンが右端のセルにあるテーブルの行があり、一部の行は他よりも明るく見えるようにする必要があるということです。もちろん、フォントを簡単に軽量化することはできますが、各画像の2つのバージョンを管理する必要なく、画像を軽量化したいと考えています。

それは灰色でなければなりませんか？画像の不透明度を低く設定するだけです（鈍くするため）。または、<div>オーバーレイを作成して、灰色に設定することもできます（効果を得るには、アルファを変更します）。

• html：

  <div id="wrapper">
      <img id="myImage" src="something.jpg" />
  </div>
  

• css：

  #myImage {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
  }
  
  /* or */
  
  #wrapper {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
      background-color: #000;
  }
  

CSS3フィルタープロパティを使用します。

img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

ブラウザのサポートは少し悪いですが、それは100％CSSです。ここで見つけることができるCSS3フィルタープロパティに関するすばらしい記事：http : //blog.nmsdvid.com/css-filter-property/

あなたのここ：

<a href="#"><img src="img.jpg" /></a>

CSSグレー：

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Ungray：

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

私はそれを見つけました：http : //zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

編集： IE10 +は、IE9以前のようにDXフィルターをサポートしていません。また、プレフィックスバージョンのグレースケールフィルターもサポートしていません。あなたはそれを修正することができます、以下の2つの解決策の1つを使用してください：

1. 頭に次のメタ要素を使用してIE9標準モードを使用してレンダリングするようにIE10 +を設定します。 <meta http-equiv="X-UA-Compatible" content="IE=9">
2. IE10でSVGオーバーレイを使用してグレイスケールのInternet Explorer 10を実現する-グレイスケールフィルターの適用方法

少しのJavaScriptを使用してもかまわない場合、jQueryのfadeTo（）は私が試したすべてのブラウザーでうまく機能します。

jQuery(selector).fadeTo(speed, opacity);

すべてのブラウザーをサポートする方が良い：

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

背景の色を設定する例を以下に示します。フロートを使用したくない場合は、幅と高さを手動で設定する必要があります。しかし、それは本当に周囲のCSS / HTMLに依存します。

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

グレー表示するには：

「色消しすること。」

filter: grayscale(100%);

@keyframes achromatization {
	0% {}
	25% {}
	75% {filter: grayscale(100%);}
	100% {filter: grayscale(100%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

「灰色で塗りつぶす。」

filter: contrast(0%);

@keyframes gray-filling {
	0% {}
	25% {}
	50% {filter: contrast(0%);}
	60% {filter: contrast(0%);}
	70% {filter: contrast(0%) brightness(0%) invert(100%);}
	80% {filter: contrast(0%) brightness(0%) invert(100%);}
	90% {filter: contrast(0%) brightness(0%);}
	100% {filter: contrast(0%) brightness(0%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

役立つメモ

• CSS3フィルターのグレースケールと飽和の違いは何ですか？

• https://www.w3.org/TR/filter-effects-1

rgba()CSSでを使用して、の代わりに色を定義できますrgb()。このような： style='background-color: rgba(128,128,128, 0.7);

と同じ色になりますが、rgb(128,128,128)不透明度は70％なので、背後にあるものは30％までしか表示されません。CSS3ですが、2008年以降、ほとんどのブラウザーで動作しています。申し訳ありませんが、＃rrggbb構文は知りません。数字で遊んでください-希釈したいものは何でも白で洗い流し、灰色で影を消すことができます。

わかりましたので、半透明のグレー（または任意の色）で長方形を作成し、それを画像の上に配置します。位置は絶対値で、Zインデックスはゼロより大きく、画像とデフォルトの直前に配置します。長方形の位置は画像の左上隅と同じになります。うまくいくはずです。

filter：expressionはCSSに対するMicrosoftの拡張機能であるため、Internet Explorerでのみ機能します。グレー表示にしたい場合は、JavaScriptを少し使用して、不透明度を50％に設定することをお勧めします。

http://lyxus.net/mvは、Firefox、Safari、KHTML、Internet Explorer、CSS3対応のブラウザで動作する不透明度スクリプトについて説明しているため、始めるのに適しています。

また、灰色の境界線を付けることもできます。