[分享]css做黑白滤镜没反应

在使用CSS做黑白滤镜时，有时可能会遇到没有反应的情况。这个问题可能有多种原因，下面我们来一一解析。 img { filter: grayscale(100); } 代码中，我们使用了CSS的filt...

在使用CSS做黑白滤镜时，有时可能会遇到没有反应的情况。这个问题可能有多种原因，下面我们来一一解析。

 img {
    filter: grayscale(100%);
  } 

代码中，我们使用了CSS的filter属性，通过grayscale函数来实现黑白效果。然而，当我们在浏览器中运行时，发现并没有生效。

原因一：图片路径错误。

检查是否设置了正确的图片路径，即是否在引入图片时写了正确的相对或绝对路径。

原因二：存在其他CSS属性干扰。

有时，其他的CSS属性也可能会影响到filter属性的效果。最好的解决方法是把其他属性注释掉，逐步排查，找到原因。

原因三：浏览器不兼容。

某些浏览器可能不支持CSS中的filter属性，或者需要针对不同的浏览器写不同的CSS代码。可以在caniuse.com等网站上查询浏览器兼容性。

通过以上方法逐一排查，我们可以找到原因并解决问题，让CSS的黑白滤镜生效。