用 CSS 使图像变灰？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/286275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gray out image with CSS?
提问by Richard Ptheitroadier
What's the best way (if any) to make an image appear "grayed out" with CSS (i.e., without loading a separate, grayed out version of the image)?
使用 CSS 使图像“变灰”的最佳方法（如果有）是什么（即，不加载单独的变灰版本的图像）？
My context is that I have rows in a table that all have buttons in the right most cell and some rows need to look lighter than others. So I can make the font lighter easily of course but I'd also like to make the images lighter without having to manage two versions of each image.
我的上下文是我在表格中有行，所有行都在最右侧的单元格中有按钮，并且某些行需要看起来比其他行更亮。所以我当然可以轻松地使字体更轻，但我也想让图像更轻，而不必管理每个图像的两个版本。
回答by Owen
Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a <div>overlay and set that to be gray (change the alpha to get the effect).
必须是灰色的吗？您可以将图像的不透明度设置得较低（使其变暗）。或者，您可以创建一个<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; }
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; }
回答by nmsdvid
Use the CSS3 filter property:
使用 CSS3 过滤器属性：
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
The browser support is a little bad but it's 100% CSS. A nice article about the CSS3 filter property you can find here: http://blog.nmsdvid.com/css-filter-property/
浏览器支持有点糟糕，但它是 100% CSS。一篇关于 CSS3 过滤器属性的好文章，您可以在这里找到：http: //blog.nmsdvid.com/css-filter-property/
回答by Sakata Gintoki
Your here:
你在这里：
<a href="#"><img src="img.jpg" /></a>
Css Gray:
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 */
}
I found it at: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao
我在以下位置找到它：http: //zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao
Edit:IE10+ does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter. You can fix it, use one in two solutions below:
编辑：IE10+ 不支持像 IE9 及更早版本那样的 DX 过滤器，也不支持灰度过滤器的前缀版本。您可以修复它，使用以下两种解决方案之一：
- Set IE10+ to render using IE9 standards mode using the following meta element in the head:
<meta http-equiv="X-UA-Compatible" content="IE=9"> - Use an SVG overlay in IE10 to accomplish the greyscaling internet explorer 10 - howto apply grayscale filter?
- 使用头部中的以下元元素将 IE10+ 设置为使用 IE9 标准模式进行渲染：
<meta http-equiv="X-UA-Compatible" content="IE=9"> - 在 IE10 中使用 SVG 叠加来完成Internet Explorer 10的灰度缩放- 如何应用灰度过滤器？
回答by Nathan Long
回答by alexmeia
Better to support all the browsers:
最好支持所有浏览器：
img.lessOpacity {
opacity: 0.4;
filter: alpha(opacity=40);
zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */
}
回答by Dave Jensen
Here's an example that let's you set the color of the background. If you don't want to use float, then you might need to set the width and height manually. But even that really depends on the surrounding CSS/HTML.
这是一个让您设置背景颜色的示例。如果您不想使用浮动，那么您可能需要手动设置宽度和高度。但即便如此，这也确实取决于周围的 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>
回答by Константин Ван
To gray out:
变灰：
“to achromatize.”
“消色差。”
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>“to fill with gray.”
“用灰色填充。”
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>Helpful notes
有用的笔记
回答by OsamaBinLogin
You can use rgba()in css to define a color instead of rgb(). Like this:
style='background-color: rgba(128,128,128, 0.7);
您可以rgba()在 css中使用来定义颜色而不是rgb(). 像这样：
style='background-color: rgba(128,128,128, 0.7);
Gives you the same color as rgb(128,128,128)but with a 70% opacity so the stuff behind only shows thru 30%. CSS3 but it's worked in most browsers since 2008. Sorry, no #rrggbb syntax that I know of. Play with the numbers - you can wash out with white, shadow out with gray, whatever you want to dilute with.
给你相同的颜色，rgb(128,128,128)但不透明度为 70%，所以后面的东西只显示 30%。CSS3 但它自 2008 年以来在大多数浏览器中都有效。抱歉，我不知道 #rrggbb 语法。玩数字 - 你可以用白色洗掉，用灰色遮住，任何你想稀释的东西。
OK so you make a a rectangle in semi-transparent gray (or whatever color) and lay it on top of your image, maybe with position:absolute and a z-index higher than zero, and you put it just before your image and the default location for the rectangle will be the same upper-left corner of your image. Should work.
好的，所以你用半透明的灰色（或任何颜色）制作一个矩形并将其放在图像的顶部，也许位置：绝对值和 z-index 高于零，然后将它放在图像和默认值之前矩形的位置将与图像的左上角相同。应该管用。
回答by VonC
Considering filter:expression is a Microsoft extension to CSS, so it will only work in Internet Explorer. If you want to grey it out, I would recommend that you set it's opacity to 50% using a bit of javascript.
考虑到 filter:expression 是 Microsoft 对 CSS 的扩展，因此它只能在 Internet Explorer 中使用。如果你想让它变灰，我建议你使用一些 javascript 将它的不透明度设置为 50%。
http://lyxus.net/mvwould be a good place to start, because it discusses an opacity script that works with Firefox, Safari, KHTML, Internet Explorer and CSS3 capable browsers.
http://lyxus.net/mv是一个不错的起点，因为它讨论了一个适用于 Firefox、Safari、KHTML、Internet Explorer 和 CSS3 浏览器的不透明脚本。
You might also want to give it a grey border.
您可能还想给它一个灰色边框。
