灰色的图像与CSS？
什么是最好的方式（如果有的话），使图像显示“变灰”与CSS（即，没有加载一个单独的，灰色版本的图像）？
我的背景是，我有一个表中的行，在最右边的单元格中都有button，有些行需要看起来比其他行轻。 所以我可以轻松地使字体变得更轻松，但是我也想让图像更轻，而不必pipe理每个图像的两个版本。
它是否必须是灰色的？ 你可以设置较低的图像的不透明度（使其变暗）。 或者，您可以创build一个<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; }
使用CSS3filter属性：
img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }
浏览器支持有点不好，但它是100％的CSS。 关于CSS3filter属性的一个很好的文章，你可以在这里find： 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 +不支持DXfilter，因为IE9和更早版本已经完成，也不支持灰度filter的前缀版本。 你可以修复它，使用下面的两个解决scheme之一：
- 设置IE10 +使用IE9标准模式渲染头部中的元素：
<meta http-equiv="X-UA-Compatible" content="IE=9"> - 在IE10中使用SVG覆盖来完成greyscaling Internet Explorer 10 – 如何应用灰度filter？
如果你不介意使用一些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>
您可以在css中使用rgba()来定义颜色，而不是使用rgb() 。 像这样： style='background-color: rgba(128,128,128, 0.7);
给你与rgb(128,128,128)相同的颜色，但具有70％的不透明度，所以后面的东西只显示30％。 CSS3，但自2008年以来，它在大多数浏览器的工作。对不起，没有我知道的#rrggbb语法。 玩数字 – 你可以用白色冲洗，用灰色阴影，无论你想稀释什么。
那么你可以用半透明的灰色（或者任何颜色）制作一个长方形，然后将它放在图像的顶部，也许位置：absolute，z-index大于零，然后把它放在图像的前面，默认矩形的位置将与图像的左上angular相同。 应该pipe用。
考虑filter：expression式是微软对CSS的扩展，所以它只能在Internet Explorer中工作。 如果你想把它变灰，我build议你使用一点javascript来设置它的不透明度为50％。
http://lyxus.net/mv是一个很好的开始，因为它讨论了一个与Firefox，Safari，KHTML，Internet Explorer和CSS3兼容浏览器兼容的不透明脚本。
你可能也想给它一个灰色的边框。
