CSS网站整体置灰，如何精准控制避免图片受影响？

在CSS中实现网站整体置灰效果，通常使用filter属性中的grayscale滤镜。然而，这种滤镜会影响到所有元素，包括图片。如果你希望避免图片受到影响，可以通过以下几种方法来实现精准控制：

方法1：使用not()选择器排除图片

你可以使用:not()选择器来排除图片元素，使其不受滤镜影响。

/* 对整个页面应用灰度滤镜，但排除图片 */
body :not(img) {
    filter: grayscale(100%);
}

方法2：单独为图片设置滤镜

你可以为图片单独设置一个反向的滤镜，使其恢复原色。

/* 对整个页面应用灰度滤镜 */
body {
    filter: grayscale(100%);
}

/* 为图片恢复原色 */
img {
    filter: grayscale(0%);
}

方法3：使用backdrop-filter对背景元素进行灰度处理

如果你只想对背景元素进行灰度处理，而不影响前景元素（如图片），可以使用backdrop-filter。

/* 对背景元素应用灰度滤镜 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: grayscale(100%);
    pointer-events: none; /* 确保不影响交互 */
    z-index: 9999; /* 确保在最上层 */
}

/* 确保图片不受影响 */
img {
    position: relative;
    z-index: 10000;
}

方法4：使用JavaScript动态控制

如果你需要更复杂的控制，可以使用JavaScript动态地为特定元素添加或移除灰度滤镜。

// 对整个页面应用灰度滤镜
document.body.style.filter = 'grayscale(100%)';

// 为图片恢复原色
document.querySelectorAll('img').forEach(img => {
    img.style.filter = 'grayscale(0%)';
});

方法5：使用CSS变量和calc()函数

如果你需要更精细的控制，可以使用CSS变量和calc()函数来动态调整灰度值。

/* 定义灰度变量 */
:root {
    --grayscale: 100%;
}

/* 对整个页面应用灰度滤镜 */
body {
    filter: grayscale(var(--grayscale));
}

/* 为图片恢复原色 */
img {
    filter: grayscale(calc(100% - var(--grayscale)));
}

总结

通过以上方法，你可以精准控制网站的整体置灰效果，同时避免图片受到影响。选择哪种方法取决于你的具体需求和项目的复杂性。