许多场景下，我们需要将网站整体调成灰色，例如表达哀悼或营造特定氛围。 简单的css代码html { filter: grayscale(100%); }即可实现全局置灰。但如果需要图片保持原色，该如何操作呢？直接在图片上使用filter: none;或尝试:not(img)选择器往往效果不佳。
许多开发者尝试过在元素上应用filter: grayscale(100%)，然后尝试html:not(img)、img { filter: none; }以及逐个列举特定元素应用filter等方法，但都未能成功只对非图片元素进行灰度处理。这是因为CSS选择器的局限性和filter属性的继承机制。简单的否定选择器:not(img)无法有效排除嵌套在其他元素内的图片。
解决方法的关键在于利用:has()伪类选择器。:has()选择器可以根据元素是否包含特定子元素进行选择。结合:not()选择器，我们可以精确选中不包含图片的元素，并应用灰度滤镜。
有效的解决方案如下：
:not(:has(img)):not(img) {
filter: grayscale(1);
}这段代码首先使用:not(:has(img))选择器，选中所有不包含
立即学习“前端免费学习笔记（深入）”；
以上就是CSS全局置灰如何优雅地保留图片原色？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
422
收藏
