如何将CSS线性渐变与图像组合？

Question

左边有一个css Gradient，左边是一个带图像的滑块。 我如何将两者结合起来，以便右侧的图像像下面的图像一样呈现形状？

更新

HTML

<div class="row shape-background">

</div> 

CSS

.shape-background {
text-align: center;
background: -moz-linear-gradient(125deg, #e20613 25%, white 25%);
background: -webkit-linear-gradient(125deg, #e20613 25%, white 25%);
background: -o-linear-gradient(125deg, #e20613 25%, white 25%);
background: -ms-linear-gradient(125deg, #e20613 25%, white 25%);

问题在于，当我在同一个div的右侧添加另一个背景图像时，线性渐变不起作用。

我应该使用img标签创建滑块，还是可以使用背景图像实现此用例？     背景：线性梯度（125deg，＃e20613 25％，白色25％）;     }

Answer 1

演示来自我的评论：

body {
  margin: auto;
  height: 200px;
  width: 300px;
  background: linear-gradient(125deg, #e20613 25%, transparent 25%), url(http://dummyimage.com/300x200&text=my_image);
  border:solid;
}
html {
display:flex;
height:100%;
background:white;
}

但这不会形成滑块。

example of a css slider with image in the HTML