Как отключить вид и поставить серый цвет на все его картинки и иконки

Question

У меня есть таблица с рядами - включает в себя красочные иконки и кнопки. Мне нужно отключить всю таблицу, это означает:

• Отключить кнопки.
• Цвет серый на весь графический интерфейс - также красочные иконки.

У меня проблемы с реализацией второго пункта. Я хотел бы поместить элемент на всю таблицу, но как я могу сделать серый цвет для всех моих изображений и значков?

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 к вашим иконкам и изображениям.

Answer 2

Вы можете поместить вашу таблицу в контейнер 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;
}

Вот скрипка для приведенного выше кода

Answer 3

Для любого изображения вы хотите добавить серый цвет. Просто добавьте несколько строк CSS, как это

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

В основном, устанавливая непрозрачность для контента, он заставляет контент выглядеть dull так что это выглядит серого цвета.

Скриптовая ссылка

Надеюсь, это поможет вам