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

Question

我在左边有一个 css 渐变，在左边有一个带有图像的滑块。我怎样才能将两者结合起来，使右边的图像呈现出如下图所示的形状？

更新

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

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

How to combine CSS Linear gradient with images?

css

css-gradients