有背景色时渐变不起作用

Question

所以我正在尝试向我的网站添加渐变文本，但是，当有背景色时它不起作用。

#maintitle {
  background-image: linear-gradient(90deg, red, blue);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}
* {
    background-color: #1c232d;
    font-family: 'Montserrat', sans-serif;
}

<div class="title" id="maintitle">
  <h1>
    Welcome!
  </h1>
</div>

是什么原因造成的？我该如何解决？

Answer 1

如果你定义一个渐变为background-image和一个background-color相同的元素，如果它们都覆盖，则只显示其中一个完整的元素（只要不添加剪裁，它们就会这样做，如果添加了，两者都会被剪裁）。

对于额外的背景颜色，您需要添加获得该背景颜色的额外父元素：

（编辑问题片段后注意：* 选择器也适用于片段中的 #maintitle 元素，因此尽管有两个 CSS 规则，background-image 和 background-color 中的设置适用于相同的元素，上面的内容也适用：background-color 覆盖 background-imge/gradient)

#maintitle {
  background-image: linear-gradient(90deg, red, blue);
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.wrapper {
   background-color: green;
}

<div class="wrapper">
  <div class="title" id="maintitle">
    <h1>
      Welcome!
    </h1>
  </div>
</div>

有背景色时渐变不起作用

Gradient not working when there's a background color

html

css

background-image

background-color