如何用CSS实现图片颜色的渐变

在CSS中，可以使用`linear-gradient()`或`radial-gradient()`函数来为图片添加颜色渐变效果。这里分别讲解两种方法：

1. **线性渐变** (`linear-gradient()`)：

   .gradient-image {
       background-image: linear-gradient(to right, color-stop(0%, color1), color-stop(100%, color2)); /* 可替换方向如top, bottom等 */
       background-size: cover; /* 保持图片填充背景区域 */
       width: 100%; /* 或者设置具体的宽度 */
       height: auto;
   }

其中 `color-stop()` 分数表示颜色在渐变中的位置，0% 到 100% 表示从左到右（默认水平方向）的变化。

2. **径向渐变** (`radial-gradient()`)：

   .gradient-image {
       background-image: radial-gradient(circle, color-stop(0%, color1), color-stop(100%, color2)); /* 圆形渐变 */
       background-position: center; /* 图片中心开始渐变 */
       background-repeat: no-repeat; /* 避免重复图案 */
       width: 100%;
       height: 100%;
   }

这里`circle`表示圆形渐变，你可以调整它为其他的形状，比如`ellipse`。

要应用这种渐变到图片上，通常需要将`background-image`属性应用于包含图片的容器元素，而不是直接对图片本身。