返回

网页变灰的同时，如何让部分元素保持彩色？

前端

在网页设计中，有时候需要将整个页面置灰，同时又想让某些元素保持彩色。这是一个有趣的面试题，也考验着开发者的创造力和对CSS和网页渲染的理解。

CSS滤镜

最简单的方法是使用CSS滤镜。滤镜可以改变元素的外观，包括颜色、对比度和饱和度。要将页面置灰，可以使用grayscale()滤镜：

body {
  filter: grayscale(100%);
}

要让某些元素保持彩色，可以将它们从body中移出，或者使用filter: none;将滤镜应用到它们上：

.colored-element {
  filter: none;
}

SVG遮罩

另一种方法是使用SVG遮罩。SVG是一种基于XML的矢量图形格式，可以用来创建复杂且可交互的图形。要使用SVG遮罩，需要创建一个包含灰度矩形的SVG文件：

<svg width="100%" height="100%">
  <rect width="100%" height="100%" fill="gray" />
</svg>

然后，将这个SVG文件作为mask属性值应用到body上：

body {
  mask: url(gray-mask.svg);
}

要让某些元素保持彩色，可以将它们从mask中移出，或者使用mask: none;将掩码应用到它们上：

.colored-element {
  mask: none;
}

Canvas绘制

还可以使用Canvas绘制来实现网页变灰，同时让部分元素保持彩色。Canvas是一个JavaScript API，允许开发人员在网页上绘制图形和图像。要使用Canvas绘制，需要创建一个新的Canvas元素：

<canvas id="canvas" width="100%" height="100%"></canvas>

然后，使用Canvas API将整个页面绘制到画布上：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(document.body, 0, 0);

接下来，将画布置灰：

ctx.filter = "grayscale(100%)";

最后，使用Canvas API将彩色元素重新绘制到画布上：

var coloredElements = document.querySelectorAll(".colored-element");
for (var i = 0; i < coloredElements.length; i++) {
  ctx.drawImage(coloredElements[i], coloredElements[i].offsetLeft, coloredElements[i].offsetTop);
}

通过使用CSS滤镜、SVG遮罩或Canvas绘制，可以实现网页变灰的同时，让部分元素保持彩色。这些技术各有优缺点，开发人员可以根据具体情况选择最合适的技术。