图片变灰色 css

img {
  filter: grayscale(100%);
}

img {
  mix-blend-mode: luminosity;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <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>
  </defs>
</svg>

<img src="your-image.jpg" alt="Gray Image" style="filter: url(#grayscale);">

img {
  filter: grayscale(100%);
  pointer-events: none; /* 禁用鼠标事件 */
}

img {
  filter: grayscale(100%);
}

/* 回退方案 */
img.no-filter {
  opacity: 0.5; /* 简单的回退方案 */
}