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

希望它有所帮助！

干杯，

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

2 个答案: