网站整体置灰但保留图片原色：如何巧妙运用CSS选择器？

要实现网站整体置灰但保留图片原色的效果，可以通过CSS的filter属性和选择器来实现。具体步骤如下：

1. 使用 filter: grayscale(100%) 将整个页面置灰

首先，我们可以使用 filter: grayscale(100%) 将整个页面的内容置灰。这个属性会将元素的颜色转换为灰度。

html {
    filter: grayscale(100%);
}

2. 使用 :not() 选择器排除图片元素

接下来，我们需要排除图片元素，使其保持原色。可以使用 :not() 选择器来排除 img 标签。

html {
    filter: grayscale(100%);
}

img {
    filter: grayscale(0%);
}

3. 处理背景图片

如果你还想保留背景图片的原色，可以使用 :not() 选择器排除带有背景图片的元素。

html {
    filter: grayscale(100%);
}

img, [style*="background-image"] {
    filter: grayscale(0%);
}

4. 处理特殊情况

如果某些图片或背景图片仍然被置灰，可以进一步使用更具体的选择器来确保它们不被置灰。

html {
    filter: grayscale(100%);
}

img, [style*="background-image"], .no-grayscale {
    filter: grayscale(0%);
}

在HTML中，你可以为需要保留原色的元素添加 no-grayscale 类：

<img src="example.jpg" alt="Example Image">
<div class="no-grayscale" style="background-image: url('background.jpg');"></div>

5. 兼容性考虑

filter 属性在现代浏览器中支持良好，但在一些旧版浏览器（如IE）中可能不支持。如果需要兼容旧版浏览器，可以考虑使用JavaScript来动态添加灰度效果。

总结

通过使用 filter: grayscale(100%) 和 :not() 选择器，可以轻松实现网站整体置灰但保留图片原色的效果。这种方法简单高效，适用于大多数现代浏览器。

html {
    filter: grayscale(100%);
}

img, [style*="background-image"], .no-grayscale {
    filter: grayscale(0%);
}

这样，整个页面将被置灰，但图片和指定的背景图片将保持原色。