html背景颜色渐变-【CSS文字渐变、背景渐变实现方法】

CSS文本渐变和背景渐变的几种实现方法

在我们日常的页面开发中，使用适当的CSS渐变效果可以让我们的界面更加美观、赏心悦目。

1.CSS文本渐变：

首先，文本渐变实际上是通过背景渐变裁剪文本的前景图像，然后文本填充颜色变为透明以显示背景颜色来实现文本渐变。 （简单来说就是将透明文字剪掉，这样我们就可以看到前面的背景色了）。 所以只要我们学会了背景色的实现方法html背景颜色渐变，就可以实现大部分文字渐变的效果了。

CSS代码：

background-image: linear-gradient(to top, #00C6FF, #8AFFD2); /* 线性渐变背景，方向向上 */
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */   

功效图：

二、CSS背景渐变：这是我们重点讲解的部分。

背景渐变方法一般分为线性渐变、径向渐变和重复渐变（也有线性、径向）。

CSS代码：

  /* 线性渐变背景，方向向上 */
  background-image: linear-gradient(to top, #00C6FF, #8AFFD2);
  /* 径向渐变背景，中心为圆心 */
  background-image: radial-gradient(#00C6FF, #8AFFD2);
  /* 重复渐变-线性，向上重复 */
  background-image: repeating-linear-gradient(to top,#00C6FF, #00C6FF 5px, #8AFFD2 5px, #8AFFD2 10px);
  /* 重复渐变-径向，中心为圆心 */
  background-image: repeating-radial-gradient(#00C6FF, #00C6FF 5px, #8AFFD2 5px, #8AFFD2 10px);  

功效图：

(1) 线性渐变：

线性渐变参数包括渐变方向、颜色值、颜色起始和结束范围。 通过这些参数，我们可以设置一些非常有特色的后端CSS效果。

CSS代码：

  /* 方块一 */
  background-image: linear-gradient( 45deg,#00C6FF, #8AFFD2);
  /* 方块二 */
  background-image: linear-gradient(to top left, #00C6FF 50%, #8AFFD2 50%);
  /* 方块三 */
  background-image: linear-gradient( to top,rgba(0 ,198,255,0), rgba(0 ,198,255,0.5),rgba(0 ,198,255,0));
  /* 方块四 */
  background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

功效图：

(2)径向梯度：

径向渐变参数包括渐变的中心（最远角可以指定中心点的位置，默认中心为圆心）、颜色值、颜色起止范围。

CSS代码：

  /* 方块一 */
  background-image: radial-gradient(#00C6FF 50%, #8AFFD2 50%);
  /* 方块二 */
  border-radius: 50%;
  background-image: radial-gradient(#00C6FF 20%, #8AFFD2 40%,#00C6FF 80%, #8AFFD2 100%);
  /* 方块三 */
  background-image: radial-gradient(farthest-corner at 0px 0px, #00C6FF 0%, #8AFFD2 100%);
  /* 方块四 */
  background-image: radial-gradient(red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

功效图：

(3) 重复渐变：

重复渐变的线性和径向与上面线性渐变和径向渐变的参数类似html背景颜色渐变，这里不再赘述。

CSS代码：

  /* 方块一 线性 */
  background-image: repeating-linear-gradient(45deg, #8AFFD2, #00C6FF 33.3%);
  /* 方块二 线性 */
  background-image: repeating-linear-gradient(to top left, red , orange , lightgreen , blue 10px);
  /* 方块三 径向 */
  background-image: repeating-radial-gradient(circle at center, #00C6FF, rgba(0,198,255,0.5) 20px);
  /* 方块四 径向 */
  background-image: repeating-radial-gradient(farthest-corner at 0px 0px, lightgreen , #00C6FF, #8AFFD2 20px);

功效图：

总结：

有了对这种渐变形式的基本了解，我们就可以实现一些常规的后端 CSS 效果了。 结合下面的文本渐变方法，我们可以得到下面有趣的文本渐变样式。

这不，我感觉简单的文字也显得高级又优雅！