使图像通过CSS“显示为灰色”的最佳方法（如果有）是什么（即，不加载图像的单独的，变灰的版本）？

我的情况是，我在表中的行都在最右边的单元格中都有按钮，并且某些行需要比其他行更亮。因此，我当然可以很容易地使字体变浅，但是我也想使图像变浅，而不必管理每个图像的两个版本。

它一定是灰色的吗？您可以将图像的不透明度设置得较低（以使其变钝）。另外，您可以创建一个<div>叠加层并将其设置为灰色（更改Alpha以获得效果）。

• 的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滤镜，也不支持灰度滤镜的前缀版本。您可以修复它，使用以下两种解决方案之一：

1. 将IE10 +设置为使用头中的以下meta元素使用IE9标准模式进行渲染： <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 */ 
}

这是一个示例，让您设置背景颜色。如果不想使用float，则可能需要手动设置宽度和高度。但这甚至还取决于周围的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语法。玩数字-您可以用白色洗净，用灰色阴影洗净，无论您想用什么稀释。

确定，所以您将一个半透明灰色（或其他颜色）的矩形制成，然后将其放置在图像的顶部，位置可能是：absolute，并且z-index大于零，然后将其放在图像和默认图像的前面矩形的位置将与图片的左上角相同。应该管用。

考虑filter：expression是Microsoft对CSS的扩展，因此它只能在Internet Explorer中使用。如果您想将其显示为灰色，我建议您使用一些JavaScript将它的不透明度设置为50％。

http://lyxus.net/mv将是一个不错的起点，因为它讨论了可与Firefox，Safari，KHTML，Internet Explorer和CSS3支持的浏览器一起使用的不透明脚本。

您可能还需要给它一个灰色边框。