CODEWITHSUNDEEP
javascripthtmlcssdisabled-control
user2503775
user2503775

Reputation: 4367

How to disable a view and put gray color to all its pictures and icons

I have a table with rows - includes colorful icons and buttons. I need to disable the whole table, that mean:

I have problems with implementing the second point. I would like to put an element on the whole table, but how can I make the gray color for all my pictures and icons ?

Upvotes: 0

Views: 1622

Answers (3)

Tobiasz
Tobiasz

Reputation: 360

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%); 
}

append grascale class to your icons and images.

Upvotes: 2

Sandeeproop
Sandeeproop

Reputation: 1776

You can put your table into a div container and then write one more div which has same height width as you table, and then you can put that div on top of your table

<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 code

.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;
}

Here is the fiddle for above code

Upvotes: 0

Karthik Chintala
Karthik Chintala

Reputation: 5545

For whatever the image you want to add gray color. Just add few lines of css like this

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

Basically by setting the opacity for the content, it makes the content look dull so that it looks gray colored.

Fiddle link

Hope it helps you

Upvotes: 0

Related Questions