使用CSS将图片变灰？

一尘不染

css

使图像通过CSS“显示为灰色”的最佳方法（如果有）是什么（即，不加载图像的单独的，变灰的版本）？

我的情况是，我在表中有几行，所有行在最右边的单元格中都有按钮，有些行看起来要比其他行亮。因此，我当然可以很容易地使字体变浅，但我也想使图像变浅，而不必管理每个图像的两个版本。

阅读 308

2020-05-16

共1个答案

一尘不染

它一定是灰色的吗？您可以将图像的不透明度设置得较低（以使其变钝）。或者，您可以创建一个<div>叠加层并将其设置为灰色（更改Alpha以获得效果）。

HTML：

<div id="wrapper">
<img id="myImage" src="something.jpg" />

CSS：

#myImage {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */

}

/ or /

#wrapper {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
    background-color: #000;
}

2020-05-16