CSS全局置灰如何优雅地保留图片原色？

在CSS中实现全局置灰并保留图片原色的效果，可以通过以下几种方式来实现：

1. 使用 filter 属性

CSS的 filter 属性可以用来对元素应用图形效果，如模糊、灰度等。你可以对整个页面应用灰度滤镜，然后对图片元素单独应用 filter: none 来保留图片的原色。

/* 全局置灰 */
html {
    filter: grayscale(100%);
}

/* 保留图片原色 */
img {
    filter: none;
}

2. 使用 mix-blend-mode 属性

mix-blend-mode 属性可以控制元素的内容如何与父元素的内容混合。你可以通过将图片的混合模式设置为 normal 来保留图片的原色。

/* 全局置灰 */
html {
    filter: grayscale(100%);
}

/* 保留图片原色 */
img {
    mix-blend-mode: normal;
}

3. 使用 backdrop-filter 属性

backdrop-filter 属性可以对元素背后的区域应用图形效果。你可以对整个页面应用灰度滤镜，然后对图片元素应用 backdrop-filter: none 来保留图片的原色。

/* 全局置灰 */
html {
    backdrop-filter: grayscale(100%);
}

/* 保留图片原色 */
img {
    backdrop-filter: none;
}

4. 使用 clip-path 和 mask 属性

如果你需要更精细的控制，可以使用 clip-path 或 mask 属性来创建复杂的遮罩效果，从而保留图片的原色。

/* 全局置灰 */
html {
    filter: grayscale(100%);
}

/* 保留图片原色 */
img {
    clip-path: inset(0 0 0 0);
    mask: url(#mask);
}

5. 使用 SVG 滤镜

你可以使用SVG滤镜来创建更复杂的灰度效果，并通过CSS应用到页面上。

<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>

/* 全局置灰 */
html {
    filter: url(#grayscale);
}

/* 保留图片原色 */
img {
    filter: none;
}

6. 使用 JavaScript 动态控制

如果你需要动态控制灰度效果，可以使用JavaScript来动态添加或移除CSS类。

document.documentElement.classList.add('grayscale');

// 保留图片原色
document.querySelectorAll('img').forEach(img => {
    img.style.filter = 'none';
});

/* 全局置灰 */
.grayscale {
    filter: grayscale(100%);
}

总结

以上方法都可以实现全局置灰并保留图片原色的效果。具体选择哪种方法取决于你的项目需求和浏览器兼容性要求。filter 属性是最简单和常用的方法，而 SVG 滤镜和 JavaScript 动态控制则提供了更高的灵活性和复杂性。