📅 最后修改于: 2023-12-03 15:30:10.055000 🧑 作者: Mango
CSS 色调背景是一种使用渐变色作为背景颜色的技巧，能为网站带来更多的视觉效果。在这篇文章中，我们将会学习如何在 CSS 中使用色调背景。
线性渐变可以在两个或更多颜色之间平滑地过渡。可以通过以下代码在 CSS 中创建线性渐变背景：
background: linear-gradient(to bottom, #ffcccc, #ff6666);
上面的代码将创建一个从上到下由 #ffcccc 色逐渐过渡到 #ff6666 色的线性渐变背景。
径向渐变从一个中心点开始，向外扩散。你可以通过以下代码创建一个径向渐变背景：
background: radial-gradient(circle at 50% 50%, #ffcccc, #ff6666);
上面的代码将创建一个以视口中心点为中心点，从内心到外围的径向渐变，颜色从 #ffcccc 逐渐过渡到 #ff6666。
可以通过在颜色之后加上百分比来制定颜色停歇点，以下代码是个例子：
background: linear-gradient(to bottom, #ffcccc 30%, #ff6666 70%);
上面的代码中，渐变色在 30% 的位置由 #ffcccc 变为 #ff6666。
方向表示渐变的方向，可以使用以下参数：
to topto bottomto leftto rightto top leftto top rightto bottom leftto bottom right例如，以下代码将创建从左到右的线性渐变：
background: linear-gradient(to right, #ffcccc, #ff6666);
使用以上提供的参数可以创建很多不同的效果。以下是一些常见的效果：
background: linear-gradient(to bottom, #c31432, #240b36);
background: linear-gradient(to bottom right, #ffcccc, #ff6666);
background: linear-gradient(white,white 3px,transparent 3px,transparent 100%);
background-size: 20px 20px;
CSS色调背景能为网站带来更丰富的视觉效果，使用起来也非常简单。以上是一些基本用法和常见效果，希望能对你有所帮助。