许多场景下,我们需要将网站整体调成灰色,例如表达哀悼或营造特定氛围。 简单的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号