网站整体置灰，图片保持原色，如何优雅实现？
许多开发者在需要将网站整体调为灰度时，常常面临一个挑战：如何避免图片也受到灰度滤镜的影响？ 简单的html { filter: grayscale(100%); }虽然能快速实现整体灰度效果，但却会连带将所有图片也灰度化，这并非理想结果。
一些尝试，例如html:not(img) { filter: grayscale(100%); }、html { filter: grayscale(100%); } img { filter: none; }以及针对特定元素的灰度设置，都未能有效解决问题。 这是因为:not()选择器在复杂嵌套结构中可能失效，而简单的样式覆盖也无法精准控制。
那么，如何才能精确地实现“网站整体灰度，图片除外”呢？ 关键在于选择器的巧妙运用。
立即学习“前端免费学习笔记（深入）”；
一个高效的解决方案是利用:not(:has(img)):not(img)选择器。此选择器会选中所有自身并非<img alt="CSS网站整体置灰，如何优雅地排除图片不被影响？" >元素且不包含<img alt="CSS网站整体置灰，如何优雅地排除图片不被影响？" >元素的元素。 这样，我们可以精准地将灰度效果应用于除图片及其父元素之外的所有元素。
因此，正确的CSS代码如下：
:not(:has(img)):not(img) {
filter: grayscale(1);
}这段代码能够有效地实现网站整体灰度效果，同时完美保留图片的原色。:has()选择器的运用是关键，它能有效判断元素内部是否包含指定元素，解决了之前方法中选择器失效的问题，从而实现了精准的样式控制。
以上就是CSS网站整体置灰，如何优雅地排除图片不被影响？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
443
收藏
