linear-gradient()
是 CSS 中的一个函数,用于创建一个线性渐变的背景图像。这意味着颜色会从一个点平滑地过渡到另一个点,沿着指定的直线方向。
语法如下:
linear-gradient(direction, color-stop1, color-stop2, ...);
direction
定义渐变的方向。它可以是角度(如45deg
)或预定义的关键字(如to right
,to bottom right
等)。color-stop1
,color-stop2
, … 是渐变的颜色停止点。每个颜色停止点都可以有一个可选的位置值。
示例
- 基本用法:
body {
background: linear-gradient(red, yellow);
}
这会创建一个从红色到黄色的垂直渐变。
- 指定方向:
body {
background: linear-gradient(to right, red, yellow);
}
这会创建一个从左到右的红色到黄色的水平渐变。
- 使用多个颜色停止点:
body {
background: linear-gradient(red, orange, yellow, green);
}
这会创建一个从红色到橙色,再到黄色,最后到绿色的渐变。
- 指定颜色停止点的位置:
body {
background: linear-gradient(red 20%, yellow 80%);
}
这会在 20% 的位置开始红色,并在 80% 的位置结束黄色。在 20% 到 80% 之间,颜色会从红色平滑地过渡到黄色。
- 使用角度:
body {
background: linear-gradient(45deg, red, yellow);
}
这会创建一个从左下角到右上角的红色到黄色的渐变。
兼容性
linear-gradient()
在现代浏览器中都得到了很好的支持,但在一些较旧的浏览器中可能不受支持。如果你需要确保在较旧的浏览器上也能有渐变效果,可能需要使用图片或其他技巧。
总之,linear-gradient()
是一个强大的 CSS 函数,可以让你创建复杂而富有吸引力的背景效果。