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

最新推荐文章于 2024-09-16 22:10:57 发布

累了要吃肉丶

最新推荐文章于 2024-09-16 22:10:57 发布

阅读量1.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43610311/article/details/133925538

前端学习专栏收录该内容

41 篇文章

订阅专栏

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; /* 必须将文字颜色设置为透明 */
}