如何实现全页面所有图层与背景渐变的混合效果

针对页面存在大量元素的场景，不需要逐个给元素加样式，有两种低改造成本的通用方案：

方案1：全局叠加渐变层（最常用，改造成本最低） #

直接在页面最顶层加一个全屏的固定定位渐变层，所有下层元素会自动和这个层做混合，完全不需要修改现有元素的任何样式。
实现代码如下：

/* 直接挂载到body的伪元素上，不需要额外添加HTML标签 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  /* 撑满整个视口 */
  width: 100vw;
  height: 100vh;
  /* 替换为你需要的渐变参数 */
  background-image: linear-gradient(-45deg, rgba(251, 234, 188, 1) 0%, rgba(0, 114, 136, 1) 100%);
  /* 混合模式按需调整，常用值：multiply/overlay/screen/lighten */
  mix-blend-mode: multiply;
  /* 调整透明度控制混合强度 */
  opacity: 0.4;
  /* 关键配置：避免渐变层挡住页面的点击、输入等交互 */
  pointer-events: none;
  /* 层级拉到最高，确保覆盖所有页面元素 */
  z-index: 99999;
}

适用场景 #

需要所有页面内容整体和渐变做混合，性能最优，不影响原有布局和业务逻辑。

方案2：元素独立混合 #

如果需要每个元素的背景/内容单独和渐变混合，而非整体叠加效果，可以用CSS变量做全局统一管控：

/* 全局定义渐变和混合模式变量 */
:root {
  --global-blend-gradient: linear-gradient(-45deg, rgba(251, 234, 188, 1) 0%, rgba(0, 114, 136, 1) 100%);
  --global-blend-mode: overlay;
}

/* 全局匹配所有元素，自动拼接渐变背景 */
* {
  background-blend-mode: var(--global-blend-mode);
  background-image: var(--global-blend-gradient), var(--element-original-bg, none);
}

/* 原有元素只需要把自身背景赋值给自定义变量即可，示例如下 */
.blend2 {
  --element-original-bg: url("img_tree.gif");
  width: 400px;
  height: 400px;
}

适用场景 #

需要每个元素独立呈现和渐变的混合效果，不需要额外的全局叠加层。

内容的提问来源于stack exchange，提问作者cashmere