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

Question

我需要创建一个具有图像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，但不是我有唯一的图像。

我错了什么？

感谢

编辑：我想要这个输出。有可能吗？http://s18.postimg.org/cx5y2jtgp/image.png

Answer 1

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

让顶层变成透明的而不是#ff0000解决了这个问题：

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

Answer 2

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

---

Fiddle

HTML:

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

CSS：

#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%)
}

---

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

Fiddle_2

---

HTML:

<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>

CSS：

#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%);
}

---

希望它能有所帮助！

干杯，