CSS网站整体置灰，如何优雅地排除图片不被影响？

在CSS中实现网站整体置灰效果通常是通过filter属性来实现的，例如使用grayscale(100%)将整个页面置灰。然而，这种方法会影响到所有的元素，包括图片。如果你希望图片不被置灰，可以通过以下几种方式优雅地排除图片的影响：

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

你可以使用:not()选择器来排除图片元素，使其不受置灰效果的影响。

/* 整体置灰 */
html {
    filter: grayscale(100%);
}

/* 排除图片 */
img {
    filter: none;
}

方法2：使用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: -1;
}

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

方法3：使用mix-blend-mode对特定元素置灰

如果你只想对特定元素置灰，可以使用mix-blend-mode属性。这种方法适用于复杂的布局。

/* 对特定元素置灰 */
.grayscale {
    filter: grayscale(100%);
}

/* 排除图片 */
img {
    filter: none;
}

方法4：使用JavaScript动态控制

如果你需要更复杂的控制逻辑，可以使用JavaScript动态地为非图片元素添加置灰效果。

document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('*:not(img)');
    elements.forEach(el => {
        el.style.filter = 'grayscale(100%)';
    });
});

方法5：使用SVG滤镜

如果你需要更高级的控制，可以使用SVG滤镜来实现置灰效果，并通过CSS排除图片。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <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>
  </defs>
</svg>

/* 应用SVG滤镜 */
html {
    filter: url(#grayscale);
}

/* 排除图片 */
img {
    filter: none;
}

总结

以上方法都可以实现网站整体置灰的同时排除图片的影响。具体选择哪种方法取决于你的项目需求和浏览器兼容性要求。通常情况下，使用:not()选择器是最简单和直接的方式。