使用CSS使图像显示为“灰显”的最佳方式（如果有的话）是什么（即，不加载单独的灰色版图像）？
我的上下文是我在一个表中有行，在最右边的单元格中都有按钮，而某些行需要看起来比其他行更亮。因此，当然我可以轻松地使字体更轻，但我也想让图像更轻，而无需管理每个图像的两个版本。
答案 0 :(得分：219)
它必须是灰色的吗？您可以将图像的不透明度设置为较低（使其变钝）。或者，您可以创建<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;
}
答案 1 :(得分：167)
使用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/
答案 2 :(得分：51)
你在这里：
<a href="#"><img src="img.jpg" /></a>
Css Gray：
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过滤器，也不支持灰度过滤器的前缀版本。 您可以修复它，使用以下两种解决方案中的一种：
<meta http-equiv="X-UA-Compatible" content="IE=9"> 答案 3 :(得分：24)
如果您不介意使用一些JavaScript，jQuery的fadeTo()可以很好地适用于我尝试的每个浏览器。
jQuery(selector).fadeTo(speed, opacity);
答案 4 :(得分：19)
最好支持所有浏览器：
img.lessOpacity {
opacity: 0.4;
filter: alpha(opacity=40);
zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */
}
答案 5 :(得分：3)
这是一个让你设置背景颜色的例子。如果您不想使用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>
答案 6 :(得分：1)
您可以在css中使用rgba()来定义颜色，而不是rgb()。像这样：
style='background-color: rgba(128,128,128, 0.7);
为您提供与rgb(128,128,128)相同的颜色，但不透明度为70％，因此背后的东西仅显示30％。 CSS3但它自2008年以来在大多数浏览器中都有效。抱歉，我不知道#rrggbb语法。玩数字 - 你可以用白色冲洗，灰色阴影，无论你想用什么稀释。
好的，你可以制作一个半透明灰色（或任何颜色）的矩形，然后将它放在你的图像上，也许是位置：绝对和z指数大于零，你把它放在你的图像之前并且矩形的默认位置将与图像的左上角相同。应该工作。
答案 7 :(得分：1)
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>
答案 8 :(得分：0)
考虑过滤器：expression是CSS的Microsoft扩展，因此它只能在Internet Explorer中使用。如果你想将它变灰，我建议你使用一些javascript将它的不透明度设置为50％。
http://lyxus.net/mv将是一个很好的起点，因为它讨论了不透明度 适用于Firefox，Safari，KHTML，Internet Explorer和支持CSS3的浏览器的脚本。
您可能还想给它一个灰色边框。