css字体填充背景 |div css视频窗口

.text-fill-bg {
font-size: 72px;
font-weight: bold;
background: linear-gradient(90deg, #f36161, #20c8eb);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

上面的代码中，大家为文本创造了彩色背景。具体来说，大家使用了linear-gradient属性，将两种颜色垂直地渐变排列。

接下来，大家使用了background-clip（背景-剪裁）属性，以及webkit-background-clip和-webkit-text-fill-color（这两个属性用于Safari浏览器）来给文本填充颜色。这个技巧非常巧妙，因为它允许大家在不使用画布元素的情况下在文本上创造颜色渐变效果。

最后，大家使用了一个提交的不透明度，来让文本颜色变为透明，让背景得以通过文字露出，完成了文字填充背景的效果。