如何使用 CSS 创建线性渐变背景？

在CSS 中，我们可以使用background-color属性将元素的背景颜色设置为特定颜色。有时我们想在使用 linear-gradient属性设置背景颜色时为元素添加更多样式。 CSS线性渐变属性可让您在两种或多种颜色之间显示平滑过渡。

句法：

background-image: linear-gradient(direction, color1, color2, ...);

参数：

• 方向：指定过渡的方向。默认值为 180 度（如果未指定）。
• color1：指定第一种颜色。
• color2：指定第二种颜色。

注意：您可以根据需要指定任意数量的颜色。

示例 1：

HTML

输出：

例 2：这演示了方向的设置。在上面的 HTML 代码中，只需更改 head 部分 CSS 部分中的“background-image”属性值，如下所示。

句法：

background-image: linear-gradient(to right, lightblue, darkblue)

输出：

示例 3：这演示了方向的设置 在学位。在上面的 HTML first 代码中，只需更改 head 部分的 CSS 部分中的“background-image”属性值，如下所示。

句法：

background-image: linear-gradient(135deg, white, lightgreen, darkblue);

输出：

示例 4：这演示了 每种颜色的位置。如果您不指定颜色的位置，它会被放置在其前一种颜色和后一种颜色之间的中间位置。下面给出的两个梯度是等效的。在上面的 HTML first 代码中，只需更改 head 部分的 CSS 部分中的“background-image”，如下所示。

句法：

background-image: linear-gradient(90deg, white, lightgreen, darkblue)
background-image: linear-gradient(90deg, white 0%, 
        lightgreen 50%, darkblue 100%)

输出：

让我们改变浅绿色的 % 值，看看会发生什么。

句法：

background-image: linear-gradient(90deg, white 0%, 
    lightgreen 80%, darkblue 100%)

输出：