如何使用CSS实现多方向linear-gradient渐变效果且无需静态图片

实现方案 #

你可以通过叠加多层CSS渐变实现需求，CSS的background属性支持同时声明多个渐变效果，多个值用逗号分隔，声明顺序靠前的渐变会覆盖在靠后的渐变之上。

方案1：渐变叠加（兼容性最好）

如果你需要垂直方向最终过渡到纯白色，直接叠加两层渐变即可：

background: 
  /* 上层：垂直方向从上到下，从完全透明过渡到纯白色，覆盖下层渐变的下半部分 */
  linear-gradient(to bottom, transparent, #fff),
  /* 下层：水平方向从左到右，实现浅粉色到红色的渐变，这里把你原代码的to left改为to right，符合从左到右的过渡要求 */
  linear-gradient(to right, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));

方案2：蒙版实现（适合需要过渡到透明的场景）

如果你需要垂直方向最终渐变到透明，方便叠加在其他背景内容上，可以用mask属性实现：

/* 基础水平渐变不变 */
background: linear-gradient(to right, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));
/* 蒙版渐变：黑色不透明部分会显示背景，透明部分会隐藏背景，实现从上到下渐隐效果 */
mask-image: linear-gradient(to bottom, #000, transparent);
/* 兼容WebKit内核浏览器（Chrome、Safari等） */
-webkit-mask-image: linear-gradient(to bottom, #000, transparent);

两种方案都不需要引入任何静态图片，仅用CSS原生属性即可实现。

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