css - 使用 CSS 使图像变灰？

Question

使用 CSS 使图像显示为“灰色”的最佳方法(如果有的话)是什么(即不加载图像的单独的灰色版本)？

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

Answer 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;
  }