一定是灰色的吗?你可以把图像的不透明度调低一点(让它变暗)。或者，您可以创建一个<div>覆盖，并将其设置为灰色(更改alpha以获得效果)。

html: < div id = "包装" > <img id="myImage" src="something.jpg" /> < / div > css: # myImage { 透明度:0.4; 过滤器:α(不透明度= 40);/* msie */ ｝ /*或*/ #包装{ 透明度:0.4; 过滤器:α(不透明度= 40);/* msie */ background - color: # 000; ｝

下面是一个让你设置背景颜色的例子。如果你不想使用浮动，那么你可能需要手动设置宽度和高度。但这也取决于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:expression是微软对CSS的扩展，所以它只能在Internet Explorer中工作。如果你想让它变灰，我建议你使用javascript将它的不透明度设置为50%。

http://lyxus.net/mv是一个很好的开始，因为它讨论了不透明度 脚本，适用于Firefox, Safari, KHTML, Internet Explorer和CSS3浏览器。

你可能还想给它一个灰色边框。

最好支持所有浏览器:

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

如果您不介意使用一点JavaScript, jQuery的fadeTo()在我尝试过的每种浏览器中都能很好地工作。

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

你可以在css中使用rgba()来定义颜色，而不是rgb()。是这样的: Style ='background-color: rgba(128,128,128,0.7);

给你相同的颜色rgb(128,128,128)，但与70%的不透明度，所以后面的东西只显示通过30%。CSS3，但自2008年以来，它在大多数浏览器中都有效。对不起，我不知道#rrggbb语法。玩弄数字——你可以用白色来洗去，用灰色来阴影，用任何你想稀释的东西。

好的，所以你做了一个半透明灰色(或任何颜色)的矩形，并把它放在你的图像的顶部，可能与position:absolute和z-index大于零，你把它放在你的图像之前，矩形的默认位置将是你的图像的左上角。应该工作。

使用CSS3过滤器属性:

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

浏览器支持相当不错，https://caniuse.com/css-filters。

你在这里:

<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过滤器，也不支持带前缀的灰度过滤器。 你可以使用以下两种解决方案中的一种来解决它:

将IE10+设置为使用IE9标准模式，在头部使用以下元元素:<meta http-equiv="X-UA-Compatible" content="IE=9"> 使用SVG覆盖在IE10来完成灰度internet explorer 10 -如何应用灰度过滤器?

变灰:

“使无色。”

filter: grayscale(100%);

@关键帧消色{ 0% {} 25% {} 75%{滤镜:灰度(100%);} 100%{滤镜:灰度(100%);} ｝ p { 字体大小:5 em; 颜色:黄色; 动画:消色差2s缓和无限交替; ｝ 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