渐变只渐变固定的高度

在 CSS 中，要让渐变只在固定的高度内发生，最直接、最常用的方法是通过 background-size 限制渐变区域的大小，并结合 background-repeat: no-repeat 阻止其平铺。 以下是实现这一效果的几种主要方式：

1. 使用 background-size（最推荐，最灵活）

你可以通过 background-size 设置渐变的宽度和高度。让宽度占满（100%），高度设为你的固定值（例如 50px）。

.gradient-fixed-height {
  /* 基础背景色（渐变以外的区域） */
  background-color: #f0f0f0; 

  /* 定义渐变 */
  background-image: linear-gradient(to bottom, #ff7e5f, #feb47b);

  /* 关键：设置渐变大小（宽 100%，高 50px） */
  background-size: 100% 50px;

  /* 关键：防止渐变在垂直方向无限循环平铺 */
  background-repeat: no-repeat; 
}

2. 使用控制颜色位置（Color Stops）

如果你希望整个元素背景是一个整体，但渐变只发生在顶部或底部的固定高度内，其余部分为纯色，你可以直接在渐变属性中写死像素值。

.gradient-color-stops {
  /* 从 0 到 50px 发生渐变，50px 之后全部变成纯白色 */
  background-image: linear-gradient(to bottom, #ff7e5f 0px, #feb47b 50px, #ffffff 50px);
}

3. 使用伪元素 ::before / ::after

如果你不想动原元素的背景属性，或者需要给渐变区域加一些特殊效果（如阴影、定位），可以用伪元素撑起一个固定高度的层。

.parent-element {
  position: relative;
}

.parent-element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 固定高度 */
  background: linear-gradient(to bottom, #ff7e5f, #feb47b);
  z-index: 1;
}

---

顶部最优雅方式

.top-gradient {
  width: 100%;
  height: 400px; /* 元素总高度 */
  background-color: #ffffff; /* 50px 渐变区域以下的底色 */

  /* 1. 定义顶部的渐变色 */
  background-image: linear-gradient(to bottom, #ff7e5f, #feb47b);

  /* 2. 限制渐变尺寸：宽 100%，高固定为 50px */
  background-size: 100% 50px;

  /* 3. 确保渐变靠顶部对齐，且不向下平铺重复 */
  background-position: top;
  background-repeat: no-repeat;
}

评论