css背景渐变色如何控制高度

CSS中的背景渐变色通常是基于元素的宽度来设置的，因此它会自动填充整个元素的高度。你不能直接通过CSS来控制背景渐变的高度。但是，你可以通过使用伪元素和背景剪切（background-clip）属性来达到这个效果。

.container {
  position: relative;
  height: 300px;
  width: 100%;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* 这里设置你想要的高度 */
  background: linear-gradient(to right, red, orange); /* 这里设置你的渐变色 */
  -webkit-background-clip: text; /* 必须加上这个属性 */
  color: transparent; /* 必须将文字颜色设置为透明 */
}