css - 如何为我的背景图像创建遮罩或剪裁渐变效果？

Question

我想要做的是，在我的背景图像上蒙版/剪辑渐变。下图是预期的结果

但实际结果如下图。渐变只覆盖了我的整个背景图像。

这是我的jsfiddle，下面是我的 css

.container{
  background-color:black;
  height:1200px;
}


.card {
  width: 100%;
  height: 100%;
  border: 1px solid red;
   background-image: linear-gradient(to right, rgba(256, 0, 0, 0.52), rgba(0, 256, 0, 0.73)), url('https://i.ibb.co/BPjySrv/card.png');
  background-repeat: no-repeat;
  
  /* background-image: url('https://i.ibb.co/BPjySrv/card.png'); */
  background-repeat: no-repeat;
}

感谢任何建议和帮助，甚至可能吗？到目前为止我发现的仅适用于 img 标签