灰色图像与CSS？ [英] Gray out image with CSS?

问题描述

使用CSS（即没有加载图片的单独的灰色版本）使图片显示为灰色显示的最佳方式（如果有）是什么？

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)?

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

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.

推荐答案

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

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).

• html：

• html:

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

css：

css:

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

/* or */

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

这篇关于灰色图像与CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！