网站整体置灰，图片保持原色，如何优雅实现？
许多开发者在需要将网站整体调为灰度时，常常面临一个挑战：如何避免图片也受到灰度滤镜的影响？ 简单的html { filter: grayscale(100%); }虽然能快速实现整体灰度效果，但却会连带将所有图片也灰度化，这并非理想结果。
一些尝试，例如html:not(img) { filter: grayscale(100%); }、html { filter: grayscale(100%); } img { filter: none; }以及针对特定元素的灰度设置，都未能有效解决问题。 这是因为:not()选择器在复杂嵌套结构中可能失效，而简单的样式覆盖也无法精准控制。
那么，如何才能精确地实现“网站整体灰度，图片除外”呢？ 关键在于选择器的巧妙运用。
立即学习“前端免费学习笔记（深入）”；
Zyro AI Background Remover
Zyro推出的AI图片背景移除工具
55 查看详情 
一个高效的解决方案是利用:not(:has(img)):not(img)选择器。此选择器会选中所有自身并非
因此，正确的CSS代码如下：
:not(:has(img)):not(img) { filter: grayscale(1);}
这段代码能够有效地实现网站整体灰度效果，同时完美保留图片的原色。:has()选择器的运用是关键，它能有效判断元素内部是否包含指定元素，解决了之前方法中选择器失效的问题，从而实现了精准的样式控制。
以上就是CSS网站整体置灰，如何优雅地排除图片不被影响？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1124076.html
微信扫一扫 
支付宝扫一扫 
