CSS: 使用background: linear-gradient(...)添加渐变背景

📝 使用场景

这个模板展示了如何使用CSS中的background: linear-gradient()属性添加渐变背景。

📘 解释

上面的CSS代码使用background: linear-gradient()属性为h1元素下方添加了渐变背景。你可以根据需要自由改变渐变的方向和颜色。

🔹 部分代码

已经应用了渐变背景。

<div class="demo-area">
  <p>已经应用了渐变背景。</p>
</div>

<style>
  .demo-area {
    height: 200px;
    text-align: center;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
</style>

💻 完整功能代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS: 使用background: linear-gradient(...)添加渐变背景</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      height: 200px;
      text-align: center;
      background: linear-gradient(to right, #ff7e5f, #feb47b);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>已经应用了渐变背景。</p>
  </div>
</body>
</html>

已复制！

🌈 渐变设计的实用技巧

使用 linear-gradient() 创建背景渐变，是现代网页设计中增强视觉深度与动感的有效方法。合理应用可以大幅提升网站的整体印象。

🎨 色彩搭配建议

除了基础的橙色渐变（#ff7e5f → #feb47b）之外，还可以通过更改方向（如 to right 改为 to bottom 或 45deg）带来完全不同的视觉体验。同色系渐变可营造沉稳感，对比色渐变则带来活泼感。推荐使用工具如 CSS Gradient Generator 来寻找理想的配色方案。

✨ 高级渐变技巧

可以使用多种颜色进行渐变（例如 linear-gradient(to right, red, yellow, green)），也可以指定颜色的具体位置（linear-gradient(to right, red 0%, yellow 50%, green 100%)）实现更复杂的效果。利用 rgba(255,255,255,0) 创建透明渐变，还能在图片上自然叠加出过渡层。

📱 响应式设计建议

在移动设备上，使用垂直方向（to bottom）的渐变通常更自然。此外，为避免滚动时性能问题，建议避免使用 background-attachment: fixed。对于深色模式，可通过 @media (prefers-color-scheme: dark) 调整渐变配色。

渐变是一种强大的设计工具，但过度使用可能会让页面显得杂乱。应重点用于重要区域（如标题、页面头部），同时注意文字的对比度，确保良好的可读性。