如何在CSS中实现单个背景叠加多个linear-gradient线性渐变

你原来的代码无法显示多个渐变的核心原因是：所有渐变的alpha通道值均为1（完全不透明），CSS多个背景的渲染规则是写在前面的内容层级更高，最上方的完全不透明渐变会彻底遮挡住下方所有渐变，最终只能看到第一个。

可行实现方案 #

CSS 支持同时定义多个线性渐变作为背景，可根据需求选择以下两种常用实现方式：

方案1：多个渐变半透明叠加

通过降低渐变的alpha通道值，让下层渐变可以透过上层渐变显示，适合融合效果：

.bg-grad {
  /* 底层纯色背景，可按需修改或删除 */
  background-color: #fff;
  /* 按层级从高到低定义渐变，调整alpha值（第四个参数）控制透明度 */
  background-image: 
    /* 上层渐变：顶部蓝调 */
    linear-gradient(180deg, rgba(120, 196, 212, 0.7) 0%, rgba(255, 255, 255, 0) 100%),
    /* 中层渐变：底部绿调 */
    linear-gradient(0deg, rgba(192, 204, 92, 0.7) 0%, rgba(255, 255, 255, 0) 100%),
    /* 下层渐变：自定义补充的第三个渐变，示例为斜向粉调 */
    linear-gradient(45deg, rgba(255, 182, 193, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* 其他原有样式 */
  min-height: 300px;
  padding: 20px;
}

对应的HTML代码无需修改：

<div class="bg-grad">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus expedita doloribus ducimus nam rem, eaque tempora aliquid accusamus repellat aut error suscipit a molestiae voluptas soluta ad eius quo. Nobis tempora facere, dicta perferendis vel perspiciatis illum? 
</div>

方案2：多个渐变分区域显示

给每个渐变指定不同的尺寸和定位，让渐变互不重叠，适合分区展示效果：

.bg-grad {
  background-image: 
    /* 顶部渐变 */
    linear-gradient(180deg, rgba(120, 196, 212, 1) 0%, rgba(90, 166, 182, 1) 100%),
    /* 中间渐变 */
    linear-gradient(180deg, #fff 0%, #f8f8f8 100%),
    /* 底部渐变 */
    linear-gradient(0deg, rgba(192, 204, 92, 1) 0%, rgba(162, 174, 62, 1) 100%);
  /* 每个渐变高度占元素的1/3，宽度铺满 */
  background-size: 100% 33.33%;
  /* 分别对应三个渐变的位置：顶、中、底 */
  background-position: top, center, bottom;
  background-repeat: no-repeat;

  /* 其他原有样式 */
  min-height: 300px;
  padding: 20px;
}

你可以根据自己需要的效果调整渐变的角度、色值、透明度、尺寸和定位参数。

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