Css 渐变背景上的元素遮罩保持灵敏

我有一个背景有渐变的元素。我必须在它上面放置一个标签，它与之共享渐变：通过调整屏幕大小，标签将在下面的元素上滑动，但渐变必须保持一致

在此图像中，您可以看到起始结构：

.container{
背景：线性梯度（100度，rgb（162,30,30）0%，rgb（27,57,172）100%）；
宽度：100%；
高度：200px；
}
.要素-1，
.要素2{
高度：100px；
}
.标签{
宽度：300px；
身高：100%；
背景色：#fff；
位置：相对位置；
左：20%；
}

---

您可以尝试以下方法：

.container{
高度：200px；
位置：相对位置；
z指数：0；
}
.要素2{
高度：100px；
剪辑路径：插入（0）；
}
.标签{
显示：内联块；
填充物：5px；
颜色：#fff；
左缘：20%；
剪辑路径：插入（0）；
}
.标签：在，
.要素2：之前{
内容：“；
位置：绝对位置；
z指数：-1；
插图：0；
背景：线性梯度（100度，rgb（162,30,30）0%，rgb（27,57,172）100%）；
}

在这里贴标签

谢谢，太好了！我已经尝试了很多方法，但这是一个我没有想到的解决方案。我只将inset更改为polygon，因为我需要标签顶部的圆角（如边界半径）。@VinzClortho如果需要圆角，请使用mask更改剪辑路径：

-webkit mask:linear gradient（#fff 0 0）

，然后可以使用边界半径