/*
* 网页特定区块置灰效果实现 - CSS方案
* 兼容主流浏览器：Chrome, Firefox, Safari, Edge, IE11+
* 实现原理：为指定区块添加grayscale-block类，触发灰度滤镜效果
*/

/* 为指定区块添加灰度滤镜 */
.grayscale-block {
  filter: grayscale(1);
  -webkit-filter: grayscale(1); /* Chrome, Safari, Opera */
  -moz-filter: grayscale(1); /* Firefox */
  -ms-filter: grayscale(1); /* IE */
  -o-filter: grayscale(1); /* Opera */
  mix-blend-mode: normal;
}

/* 确保指定区块的所有子元素也应用灰度滤镜 */
.grayscale-block * {
  filter: inherit;
  -webkit-filter: inherit;
  -moz-filter: inherit;
  -ms-filter: inherit;
  -o-filter: inherit;
}

/* 确保未添加grayscale-block类的元素不受影响 */
*:not(.grayscale-block):not(.grayscale-block *) {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  -o-filter: none !important;
}