Question

我有一个带行的表 - 包括彩色图标和按钮。我需要禁用整个表，这意味着：

禁用按钮。
整个GUI的颜色为灰色 - 也是彩色图标。

我在实施第二点时遇到问题。我想在整个桌子上放一个元素，但是如何为我的所有图片和图标制作灰色？

Answer 1

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray; 
  -webkit-filter: grayscale(100%); 
}

将grascale class附加到您的图标和图像。

Answer 2

无论您想要添加灰色的图像。只需添加几行这样的CSS

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

基本上，通过设置内容的不透明度，它会使内容看起来dull，使其看起来是灰色的。

Fiddle link

希望它可以帮到你

Answer 3

您可以将表格放入div容器中，然后再写一个与表格高度相同的div，然后将该div放在表格顶部

<div class="container">
<table>
    <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>
<div class="top"></div>

css代码

.container {
  position:relative;
}
.top {
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  background:#333;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
table {
  width:100%;
  border:1px solid;
}
table td {
  width:50%;
  border:1px solid;
}

以上代码的fiddle

如何禁用视图并将灰色添加到其所有图片和图标

3 个答案: