彩虹文本在背景颜色不工作的CSS

Question

我正在尝试在黑色背景上创建彩虹文字......

为什么我的代码不起作用？ 当用css进行平滑时，它会显示彩虹文本但背景颜色，反之亦然...

const groupedByName = people.reduce((obj, person) => {
  const count = obj[person] || 0
  return { ...obj, [person]: count + 1 }
}, {})

.Bg5{
	background-color: #292F33!important;
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.55)!important;
	
}


.Bg5{font-size:74px!important;
  background-image:
  -webkit-gradient( 
  linear, right top, right bottom, 
  color-stop(0.4, #FB0F64), 
  color-stop(0.7,#D4FE20),
  color-stop(0.8, #6EFF1D) 
  );
  

  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;

   -webkit-text-stroke: 2px black;

}

Answer 1

您可以使用伪元素创建另一个图层：

mounted()

.Bg5 {
  font-size: 74px!important;
  text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.55);
  background-image:linear-gradient(to right,yellow,red);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px black;
  position: relative;

}

.Bg5:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-color: #292F33;
}