如何使 HTML 元素变灰

How to gray out a HTML element

提问by Jonathan

I would like to gray out a HTML table to make it appear that it does not apply instead of hidding it. Any ideas on how this can be done? Hopefully with CSS!

我想将 HTML 表格灰化，使其看起来不适用而不是隐藏它。关于如何做到这一点的任何想法？希望与CSS！

回答by BalusC

Lower the opacity.

降低不透明度。

<table class="grayout">
    ...
</table>

.grayout {
    opacity: 0.6; /* Real browsers */
    filter: alpha(opacity = 60); /* MSIE */
}

回答by Chandrakant

if you only want to gray out all HTML then you can use filters

如果您只想将所有 HTML 变灰，那么您可以使用过滤器

.grayscale { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }

if you want user should not click on it, then place empty DIV with absolute position and 100% height / width.

如果您希望用户不要单击它，则放置具有绝对位置和 100% 高度/宽度的空 DIV。

here is working code https://jsfiddle.net/rb4f7wf6/

这是工作代码 https://jsfiddle.net/rb4f7wf6/