使用 CSS 使图像变灰？

Posted 2023-03-06

【中文标题】使用 CSS 使图像变灰？

【英文标题】：Gray out image with CSS?

【发布时间】：2010-09-22 03:00:10

【问题描述】：

使用 CSS 使图像“变灰”（即不加载单独的变灰版本的图像）的最佳方法是什么（如果有）？

我的上下文是，我在表格中有行，在最右边的单元格中都有按钮，并且某些行需要看起来比其他行更轻。因此，我当然可以轻松地使字体更亮，但我也想使图像更亮，而不必管理每个图像的两个版本。

【参考方案1】：

它必须是灰色的吗？您可以将图像的不透明度设置为较低（使其变暗）。或者，您可以创建 <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;

【讨论】：

不错的互联网浏览器。您可以使用 filter 属性做更多事情；因为它使用 DirectDraw 进行渲染。但是，它只适用于 IE

我不得不使用 jQuery.. 我做了 $("#imgid").filter.opacity = "0.3"

【参考方案2】：

使用 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。

【讨论】：

为了让它更暗，添加contrast(x%)属性，例如grayscale(100%) contrast(30%).

浏览器支持是一个真正的问题，因为它绝对不能在 IE10、IE11、FF26、Safari 5.1.x (Win7 x64) 或 Chrome 之外的任何东西（例如）中运行。

这不允许您将其设置为浅灰色，但如果在白色背景上，您可以将其与 opacity 结合使用来实现； img filter: grayscale(100%); opacity: 0.4;

【参考方案3】：

你在这里：

<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 */

非灰色：

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"> 在 IE10 中使用 SVG 覆盖来完成灰度internet explorer 10 - howto apply grayscale filter?

【讨论】：

谢谢！这是帮助我在 Firefox 中使用它的唯一答案！

@Jamie Carl：很高兴我能帮上忙。此代码在所有浏览器中都能正常工作:)

@ErenYeager in ungray，为什么放大：1？我猜这是一个错误？

【参考方案4】：

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

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

【讨论】：

刚刚在这里再次偶然发现了我的旧答案。我现在不可能为此使用 JS。纯 CSS 更好。

【参考方案5】：

更好地支持所有浏览器：

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

【讨论】：

哇！没有任何包装。谢谢！

【参考方案6】：

变灰：

“消色差。”

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>

---

有用的说明

What's the difference between CSS3 filter grayscale and saturate?

https://www.w3.org/TR/filter-effects-1

【讨论】：

对比是我想要的

【参考方案7】：

这是一个让您设置背景颜色的示例。如果您不想使用浮动，则可能需要手动设置宽度和高度。但即便如此，这也确实取决于周围的 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>

【参考方案8】：

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

为您提供与rgb(128,128,128) 相同的颜色，但不透明度为 70%，因此后面的内容仅显示 30%。 CSS3，但自 2008 年以来它在大多数浏览器中都可以使用。抱歉，我不知道 #rrggbb 语法。玩弄数字——你可以用白色洗掉，用灰色抹掉阴影，任何你想稀释的东西。

好的，所以你用半透明灰色（或任何颜色）制作一个矩形并将其放在图像顶部，可能位置：绝对且 z-index 高于零，然后将它放在图像之前矩形的默认位置将与图像的左上角相同。应该可以。

【参考方案9】：

考虑到 filter:expression 是 Microsoft 对 CSS 的扩展，因此它只能在 Internet Explorer 中使用。如果你想让它变灰，我建议你使用一点 javascript 将它的不透明度设置为 50%。

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

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

【讨论】：

opacity 是一个 css3 特性，过滤器部分是专门为 MSIE 设计的，其他浏览器会选择 opacity