css 以灰度和淡入显示图像

Posted 2021-05-13

/*
You can modify the “darkness” of the image by playing with the SVG used.
Hint: Use a specific selector, else it will apply to all pics
*/

img {
  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: grayscale(100%);
  filter: gray; /* IE 6-9 */
}

img:hover {
  filter: none;
  transition: 1s;
}