Question

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.

Answer 1

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:

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

• css:

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