巧妙运用CSS，让网站整体置灰的同时完美保留图片色彩！
许多开发者在网站整体置灰时，常常面临一个挑战：如何避免图片也变灰？本文将提供一种精准有效的CSS解决方案，轻松解决这一难题。
您可能尝试过html { filter: grayscale(100%); }，或者html:not(img) { filter: grayscale(100%); } img { filter: none; }等方法，但这些方法都存在局限性。直接使用html选择器会影响所有元素，包括图片；而:not(img)选择器无法处理图片嵌套在其他元素的情况，导致图片仍然受灰度滤镜影响。 逐个元素添加filter: grayscale(100%);则工作量巨大且难以保证全面覆盖。
问题的关键在于CSS选择器的优先级和作用范围。 我们需要更精准地定位目标元素。
立即学习“前端免费学习笔记（深入）”；
高效的解决方案：
:not(:has(img)):not(img) {
filter: grayscale(1);
}这段代码使用了:not(:has(img))选择器，它选择所有不包含元素的元素。 配合:not(img)，确保所有不包含图片的元素以及图片本身都被排除在灰度滤镜之外。filter: grayscale(1);与filter: grayscale(100%);效果相同，只是简写形式。 通过此方法，您可以轻松实现网站内容置灰，图片色彩保持不变的效果。
以上就是CSS网站整体置灰，如何精准控制避免图片受影响？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
