什么是最好的方法(如果有)，使图像显示“灰色”与CSS(即，没有加载一个单独的，灰色的图像版本)?
我的上下文是，我在一个表中有行，在最右边的单元格中都有按钮，一些行需要看起来比其他行更轻。所以我可以让字体更轻，当然，我也想让图像更轻，而不必管理每个图像的两个版本。
当前回答
下面是一个让你设置背景颜色的例子。如果你不想使用浮动，那么你可能需要手动设置宽度和高度。但这也取决于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>
其他回答
一定是灰色的吗?你可以把图像的不透明度调低一点(让它变暗)。或者，您可以创建一个<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>
最好支持所有浏览器:
img.lessOpacity {
opacity: 0.4;
filter: alpha(opacity=40);
zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */
}
考虑filter:expression是微软对CSS的扩展，所以它只能在Internet Explorer中工作。如果你想让它变灰，我建议你使用javascript将它的不透明度设置为50%。
http://lyxus.net/mv是一个很好的开始，因为它讨论了不透明度 脚本，适用于Firefox, Safari, KHTML, Internet Explorer和CSS3浏览器。
你可能还想给它一个灰色边框。
使用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。
