巧妙运用CSS，让网站整体置灰的同时完美保留图片色彩！
许多开发者在网站整体置灰时，常常面临一个挑战：如何避免图片也变灰？本文将提供一种精准有效的CSS解决方案，轻松解决这一难题。
您可能尝试过html { filter: grayscale(100%); }，或者html:not(img) { filter: grayscale(100%); } img { filter: none; }等方法，但这些方法都存在局限性。直接使用html选择器会影响所有元素，包括图片；而:not(img)选择器无法处理图片嵌套在其他元素的情况，导致图片仍然受灰度滤镜影响。 逐个元素添加filter: grayscale(100%);则工作量巨大且难以保证全面覆盖。
问题的关键在于CSS选择器的优先级和作用范围。 我们需要更精准地定位目标元素。
Zyro AI Background Remover
Zyro推出的AI图片背景移除工具
55 查看详情
立即学习“前端免费学习笔记（深入）”；
高效的解决方案：
:not(:has(img)):not(img) { filter: grayscale(1);}
这段代码使用了:not(:has(img))选择器，它选择所有不包含:not(img)，确保所有不包含图片的元素以及图片本身都被排除在灰度滤镜之外。filter: grayscale(1);与filter: grayscale(100%);效果相同，只是简写形式。 通过此方法，您可以轻松实现网站内容置灰，图片色彩保持不变的效果。
以上就是CSS网站整体置灰，如何精准控制避免图片受影响？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1123674.html
微信扫一扫 
支付宝扫一扫 
