如何利用 CSS 渐变实现多样化背景效果

news2024/9/20 18:31:16

前言

总在平常看到像这样的图片背景是如何实现的呢背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。
请添加图片描述

在日常开发中有很多需要用到渐变的地方，这片文章来总结一下
来看MDN是如何说的
CSS 渐变由 [<gradient>] 数据类型表示，它是 [<image>] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。

一共有三种类型的渐变

线性渐变:linear-gradient()创建

线性渐变 是最常见的一种渐变方式，它沿着指定的轴线从一种颜色过渡到另一种颜色。你可以控制渐变的方向、颜色停留点和渐变的角度，创造出各种效果，例如从左到右、从上到下或对角线方向的渐变。

* 渐变轴为 45 度，从蓝色渐变到红色 */

linear-gradient(45deg, blue, red);

* 渐变轴为 45 度，从蓝色渐变到透明*/
linear-gradient(45deg,blue,transparent)
linear-gradient(45deg,blue,rgba(0,0,0,0))

/* 从右下到左上、从蓝色渐变到红色 */

linear-gradient(to left top, blue, red);
/*  蓝色渐变到红色再渐变到黄色 */
linear-gradient(to left top, blue, red,yellow);


/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */

linear-gradient(0deg, blue, green 40%, red);

/* 色标：从下到上，从蓝色开始渐变，到高度 200px 位置是绿色渐变开始，最后以红色结束 */

linear-gradient(0deg, blue, green 200px, red);  

/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */

linear-gradient(.25turn, red, 10%, blue);

  

/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */

linear-gradient(45deg, red 0 50%, blue 50% 100%);

径向渐变:radial-gradient()创建

径向渐变 从一个中心点向外扩展，逐渐过渡到其他颜色。你可以设置渐变的形状、大小以及中心点的位置，来实现从中心向外的渐变效果，这种效果常用于创建深度感和立体感。

/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)
/*65% 300px: 这是渐变的尺寸和位置设置。

65% 表示渐变的形状或大小，通常是相对于容器的宽度或高度的百分比。在这个例子中，它表示渐变的结束点距离渐变中心 65% 的位置。

300px 指渐变的半径，即从中心点到渐变的边缘的距离。

at right top: 这是渐变的起始位置。right top 表示渐变的中心点位于容器的右上角。 */

radial-gradient(60% 100px at left top, red 0, blue, green 100%)

锥形渐变:conic-gradient()创建

没怎么使用过本文不做展开

B站渐进色背景实现
请添加图片描述

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.layout{

width:100vw;

min-height:100vh;

background:

linear-gradient(to bottom,transparent -100px, #fff 300px),

linear-gradient(to right ,#D2EEF9,#FFD1DE)

;

}

</style>

</head>

<body>

<div class="layout"></div>

</body>

</html>

boss直聘渐变色
请添加图片描述

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">![请添加图片描述](https://i-blog.csdnimg.cn/direct/ded9580041234733bfbbc569bcbf3ec1.png)


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.layout{

width:100vw;

min-height:100vh;

background:

linear-gradient(to bottom,transparent, #fff 300px),

radial-gradient(90% 300px at left top, #95E0DC, transparent),

radial-gradient(65% 300px at right top, #D3CBFC, transparent)

;

}

  

</style>

</head>

<body>

<div class="layout"></div>

</body>

</html>