background-image渐变详解

background-image渐变详解

在CSS中，background-image 属性不仅可以用来设置背景图片，还可以用于创建线性渐变（linear gradients）和径向渐变（radial gradients）背景。

线性渐变（Linear Gradients）

线性渐变是从起点到终点沿着一条直线逐渐过渡的一种颜色或透明度的变化。语法格式如下：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction：指定渐变的方向，默认的方向是：从上往下。可以是角度（如 135deg、45deg），也可以是关键字（to top、to right、to bottom、to left 等）。
• color-stop1, color-stop2, …：定义渐变过程中的颜色停靠点，每个停靠点由一个颜色值和可选的停止位置（百分比或长度值）组成。

例如：

background-image: linear-gradient(to right, red, yellow 50%, green);

这将创建一个从左到右的渐变，开始为红色，到达一半时变为黄色，剩余部分为绿色。
效果如下：

径向渐变（Radial Gradients）

径向渐变是从一个中心点向外围扩散的颜色或透明度的变化。语法格式如下：

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

• shape：指定渐变形状，默认为 ellipse（椭圆），也可设置为 circle（圆形）。
• size: 定义渐变的大小，默认为farthest-corner（指定径向渐变的半径长度为从圆心到离圆心最远的角），也可以是closest-side（指定径向渐变的半径长度为从圆心到离圆心最近的边）,closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角），farthest-side（指定径向渐变的半径长度为从圆心到离圆心最远的边）
• at position：定义渐变的中心位置，可以是关键字（如 center）或者具体的坐标（如 left top 或 50px 50px）。
• color-stop1, color-stop2, …：同线性渐变一样，定义颜色停靠点和它们的位置。

例如：

background-image: radial-gradient(circle at center, red, rgba(0, 0, 0, 0.5), blue);

这个例子创建了一个从中心向外扩展的圆形径向渐变，起始颜色为红色，中间转为半透明黑色，最外圈为蓝色。
效果如下：

以下是一些例子：

.container {
    width: 300px;
    height: 200px;
    margin: 50px;
}
.container1 {
    background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
.container2 {
    background-image: radial-gradient(circle, red, yellow, green);
}
.container3 {
    background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
.container4 {
    background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

按钮背景实例：

.container {
    margin: 300px;
    width: 160px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 14px, rgba(0, 0, 0, 0) 14px), linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-size: 40px, 100%;
    background-repeat: no-repeat;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
    cursor: pointer;
}

效果如下：

利用background-blend-mode实现图片和背景颜色的动画效果：
关于此属性的详解可以查看这篇文章

.container {
    width: 300px;
    height: 200px;
    background-image: url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202'),
        linear-gradient(to right, red 0%, orange 20%, yellow 20%, green 50%, cyan 50%, blue 80%, purple 80%, black 100%);
    background-size: cover, 100% 100%;
    background-position: 0 0, 300px 0;
    background-blend-mode: luminosity;
    background-repeat: no-repeat;
    cursor: pointer;
}
.container:hover {
    background-position: 0 0, 0 0;
    transition: 5s;
}

效果如下：