如何用css实现渐变背景linear-gradient

CSS的linear-gradient()函数用于创建线性渐变背景，语法为background: linear-gradient(方向, 颜色1, 颜色2, ...)；方向可选如to bottom或45deg，颜色至少两个，支持#fff、rgb()等格式；示例包括从上到下、从左到右、对角线、多色及带透明度渐变，常用于遮罩叠加图片；通过百分比可控制颜色停靠点，配合background-size还能实现条纹背景，掌握方向、颜色与位置控制即可灵活应用。

CSS 的 linear-gradient() 函数可以创建线性渐变背景，让颜色平滑过渡。使用它不需要图片，节省资源，还能提升页面视觉效果。

基本语法

linear-gradient() 写在 background 或 background-image 属性中，格式如下：

• 方向：可选，比如 to bottom、to right、45deg 等
• 颜色：至少两个颜色值，支持任意 CSS 颜色格式（如 #fff、rgb()、hsl()、transparent）

常见用法示例

以下是几种典型写法，可以直接复制使用：

从上到下的渐变（默认方向）

立即学习“前端免费学习笔记（深入）”；

从左到右的渐变

对角线渐变

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

角度控制（顺时针为正）

多色渐变（支持3种以上颜色）

带透明度的渐变（常用于遮罩）

这个例子中，渐变叠加在图片上，实现文字区域更易读的效果。

实用技巧

想让渐变更自然或满足特定设计需求，可以注意以下几点：

• 使用 百分比 控制颜色停靠点：
  linear-gradient(to right, #000 0%, #fff 100%)
• 指定中间断点：
  linear-gradient(to right, #3498db 0%, #e74c3c 50%, #9b59b6 100%)
• 配合 background-size 做条纹背景：
  background: repeating-linear-gradient(45deg, #fff, #fff 10px, #eee 10px, #eee 20px);

以上就是如何用css实现渐变背景linear-gradient的详细内容，更多请关注php中文网其它相关文章！