如何用CSS实现网站整体灰度化同时保持图片颜色不变？
CSS网站整体灰度化，图片保持彩色
许多开发者在需要将网站整体设置为灰度时，都会面临一个挑战：如何避免图片也变成灰度？简单的html { filter: grayscale(100%); } 会使页面所有内容，包括图片，都变成灰度。本文将详细介绍如何使用CSS代码实现网站整体灰度化，同时保持图片的原色。
一些常见的尝试，例如html:not(img) { filter: grayscale(100%); }、html { filter: grayscale(100%); } img { filter: none; }，以及分别为常见的HTML元素（如div, i, span, p, b）添加灰度滤镜，都无法完全解决问题。这是因为not()伪类选择器和简单的样式覆盖，无法有效处理图片元素嵌套在其他元素内部的情况。
问题在于，当图片嵌套在其他元素中时，外层元素的filter: grayscale(100%); 仍然会影响到图片。而简单的img { filter: none; } 也无效，因为图片的父元素可能已经应用了灰度滤镜。
立即学习“前端免费学习笔记（深入）”；
因此，需要更精确的选择器来解决这个问题。最佳方案是使用:not(:has(img)) 选择器。此选择器可以选中不包含<img alt="如何用CSS实现网站整体灰度化同时保持图片颜色不变？" > 元素的元素。结合not(img)，可以确保既不选择<img alt="如何用CSS实现网站整体灰度化同时保持图片颜色不变？" > 元素本身，也不选择包含<img alt="如何用CSS实现网站整体灰度化同时保持图片颜色不变？" > 元素的任何元素。
正确的CSS代码如下：
:not(:has(img)):not(img) {
filter: grayscale(1);
}这段代码精确地将不包含图片的元素，以及图片本身，都排除在灰度滤镜之外，从而实现网站整体灰度化，图片保持原色的效果。
以上就是如何用CSS实现网站整体灰度化同时保持图片颜色不变？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
253
广告
收藏
