小编典典

使用 CSS 使图像变灰？

all

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

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

阅读 56

2022-07-02

共1个答案

小编典典

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

html:

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

CSS：

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

}

/ or /

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

}

2022-07-02