css - 如何将 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;
}

但这不会成为滑块。

HTML 中带有图像的 CSS 滑块示例