CSS 背景渐变色

概述

在前端开发中，为网页添加背景色是非常常见的需求之一。除了使用传统的纯色背景外，使用渐变色背景可以给网页增添更多的美感和层次感。CSS 提供了多种方式来实现背景渐变色效果，本文将详细介绍这些方法的用法和示例。

线性渐变

线性渐变是最常见的一种背景渐变效果，它通过定义起点和终点的位置来创建一个颜色过渡的效果。在 CSS 中，我们使用 linear-gradient() 函数来实现线性渐变。

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction： 渐变的方向。可以使用关键字（比如 to top、to bottom、to left、to right 等），也可以使用角度值（比如 45deg、135deg）。
• color-stop： 渐变的颜色阶段。可以使用颜色值，也可以使用颜色值和位置。

方向关键字

CSS 提供了一些快捷的关键字来表示线性渐变的方向：

• to left：从右到左
• to right：从左到右
• to top：从下到上
• to bottom：从上到下
• to bottom left：从右上到左下
• to bottom right：从左上到右下
• to top left：从右下到左上
• to top right：从左下到右上

示例

下面是一个简单的线性渐变背景的示例：

body {
  background: linear-gradient(to bottom, #e66465, #9198e5);
}

颜色阶段设置位置

我们也可以通过在颜色值后面加上位置信息，来精确控制每个颜色的过渡位置。位置信息是一个 0 到 1 之间的数值，表示颜色在渐变中的百分比位置。

示例：

body {
  background: linear-gradient(to right, red, yellow 50%, green);
}

径向渐变

除了线性渐变，CSS 还提供了径向渐变，它是以一个中心点为起点，向四周辐射状地扩展渐变色。与线性渐变不同，径向渐变的语法中不需要指定方向，而是通过指定起点和结束点的位置来控制。

语法

background: radial-gradient(shape size at position, start-color, ..., last-color);

• shape：渐变形状，可以是 circle 或者 ellipse。
• size：渐变的大小，可以是关键字 closest-side、closest-corner、farthest-side、farthest-corner，也可以是长度值。
• at position：渐变的位置，可以是关键字 center，也可以是具体的位置坐标（比如 50% 50%）。
• start-color to last-color：渐变的颜色阶段，可以使用颜色值。

示例

下面是一个简单的径向渐变背景的示例：

body {
  background: radial-gradient(circle, #e66465, #9198e5);
}

重复渐变

有时候，我们需要让渐变形成重复的效果，使其在背景上连续重复出现。CSS 提供了 repeating-linear-gradient() 和 repeating-radial-gradient() 函数来实现重复渐变效果。

语法

background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
background: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

这两个函数的参数和对应的线性渐变和径向渐变的参数是一样的。

示例

下面是一个简单的重复渐变背景的示例：

body {
  background: repeating-linear-gradient(to bottom, red, yellow 20%, green 40%);
}

更多样式和效果

除了上述基本的渐变效果，CSS 还提供了更多的样式和效果来控制和定制渐变背景。

渐变中止

使用 color-stop 可以控制渐变的中止。除了使用具体的颜色值之外，还可以使用关键字 transparent 或者 currentColor 来定义中止。

示例：

body {
  background: linear-gradient(to bottom, red, transparent);
}

多重渐变

在一个背景中可以使用多个渐变，将它们叠加在一起形成复杂的效果。

示例：

body {
  background: linear-gradient(to top, red, orange),
              linear-gradient(to top, yellow, green);
}

混合模式

在渐变中使用 background-blend-mode 属性可以控制渐变和背景之间的混合模式。比如可以控制渐变颜色的透明度、覆盖方式等。

示例：

body {
  background: linear-gradient(to top, red, blue),
              linear-gradient(to left, green, yellow);
  background-blend-mode: multiply;
}