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

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:

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

希望对您有所帮助！

干杯，

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

How can I put two different gradient properties

css

gradient