优雅地保留图片原色，实现CSS全局网站置灰
许多场景下，我们需要将网站整体调成灰色，例如表达哀悼或营造特定氛围。 简单的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()选择器，我们可以精确选中不包含图片的元素，并应用灰度滤镜。
有效的解决方案如下：
Zyro AI Background Remover
Zyro推出的AI图片背景移除工具
55 查看详情
:not(:has(img)):not(img) { filter: grayscale(1);}
这段代码首先使用:not(:has(img))选择器，选中所有不包含
立即学习“前端免费学习笔记（深入）”；
以上就是CSS全局置灰如何优雅地保留图片原色？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1124873.html
微信扫一扫 
支付宝扫一扫 
