CSS图像线性渐变封面图像

我使用上面的代码在右侧显示包含的背景图像，并通过从红色到图像透明度的线性渐变填充左侧空间。但这不起作用，因为它在右侧显示图像，但在左侧仅显示从红色到透明的线性渐变，不会覆盖图像。。。如何修复此问题？

只需翻转渐变和图像顺序即可。首先是渐变，然后是图像

正文{
背景图像：线性渐变（红色，透明），url（'http://unsplash.it/1200x800');    
背景尺寸：包含；
背景重复：无重复；
背景位置：右；
}
div{
高度：300px；
}

---

如果您试图让红色从左侧开始，然后在屏幕右侧慢慢过渡到透明，只需在“红色，透明”之前的渐变中添加“向右”

正文{
背景图像：线性渐变（向右，红色，透明），url（'http://unsplash.it/1200x800');    
背景尺寸：包含；
背景重复：无重复；
背景位置：右；
}
div{
高度：300px；
}

background-image: url('http://unsplash.it/1200x800'), linear-gradient(red, transparent);    
background-size: contain;
background-repeat: no-repeat;
background-position: right;

body {
  background-image: linear-gradient(to right, red, transparent), url('http://unsplash.it/1200x800');    
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

div {
  height: 300px;
}

<div></div>