Css 如何放置两个不同的渐变属性

我需要创建一个渐变横幅，有图像V。 所以我有这个部分给了我这个图像：

background: linear-gradient(45deg, #0000ff 12%,#ffffff 25%,#ff0000 37%);

这一部分给了我图像/：

background: linear-gradient(-45deg, #0000ff 12%,#ffffff 25%,#ff0000 37%);

所以我试着用这个：

background: linear-gradient(45deg,  #0000ff 12%,#ffffff 25%,#ff0000 37%),
linear-gradient(-45deg, #0000ff 12%,#ffffff 25%,#ff0000 37%);

我希望图像是V，但不是我唯一的图像

我怎么了

谢谢

编辑：我想要这个输出。可能吗？

---

正如@Harry在评论中提到的，顶层与底层重叠

使顶层变为透明而不是

#ff0000

解决了这一问题：

background: linear-gradient(45deg,  #0000ff 12%,#ffffff 25%,transparent 37%),
linear-gradient(-45deg, #0000ff 12%,#ffffff 25%,#ff0000 37%);

---

您还可以选择在横幅中指定两个元素，以复制背景，如下图所示：

---

HTML:

---

编辑：您还可以使用绝对定位来确保您在横幅中的内容不会受到影响

---

HTML:

---

希望有帮助

---

干杯，

这是因为两个纯色渐变彼此重叠。顶层必须是透明的，以便后面的一层显示出来。是否可以添加预期输出的图像？可能的副本

<div id="banner">
  <div id="left">
  </div>
  <div id="right">
  </div>
</div>

#banner {
  width: 100%;
}

#left{
  float: left;
  width: 50%;
  height: 200px;
  background: linear-gradient(45deg,  #0000ff 12%,#ffffff 25%,#ff0000 37%)
}

#right{
  float: right;
  width: 50%;
  height: 200px;
  background: linear-gradient(-45deg,  #0000ff 12%,#ffffff 25%,#ff0000 37%)
}

<div id="banner" align="center">
  <div id="left">
  </div>
  <div id="right">
  </div>
<img src='http://allspark.net/cypherswipe/yang-grey-alpha.png' height="200px">

</div>

#banner {
  width: 100%;
}

#left{
  left:0;
  position:absolute;
  z-index: -1;
  width: 50%;
  height: 200px;

  background: linear-gradient(45deg,  #0000ff 12%,#ffffff 25%,#ff0000 37%);
}

#right{
  right:0;
  position:absolute;
  z-index: -1;
  width: 50%;
  height: 200px;
  background: linear-gradient(-45deg,  #0000ff 12%,#ffffff 25%,#ff0000 37%);
}