如何创建一个分为两半的css背景,并向不同的方向发展？

Question

*更新

我相信我之前错误地解释了我的问题.我想知道它是否可能有一个从上到下有两个渐变的div,从下到下也有从左到右的渐变.

Div从上半部分的颜色A1到A5,而下半部分从A6到A10.

同时,div的上半部分从颜色A1-A5变为颜色B(从左到右)

div的下半部分从颜色A6-A10变为颜色B(从左到右)

任何帮助将不胜感激,

谢谢

*更新2

所以基本上这只是一个例子:

http://jsfiddle.net/guisasso/kF9QV/6/

正确的渐变显示在左侧div(我知道我使用表格进行布局).我希望右侧的2个div以与左侧div(从上到下)相同的渐变开始,并且同时具有从左到右的渐变,因此它会淡出为白色背景那个div的结尾.

除了右边的div实际上是一个单独的div会更好,但不是必须的.

希望这能使问题清楚.

HTML

<table>
<tr>
    <td rowspan="2" class="actualgradient">&nbsp;</td>
    <td class="toplefttoright">&nbsp;</td>
</tr>
<tr>
    <td class="bottomlefttoright">&nbsp;</td>
</tr>
</table>

<p>Example</p>

CSS

.horizontal 
{

background: #ffb76b; /* Old browsers */
background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);      /* IE10+ */
background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
 width:200px;
 height:100px;
}

.toplefttoright
{
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFA73D 100%);
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFA73D 100%);
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFA73D 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFA73D));
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFA73D 100%);
background-image: linear-gradient(to left, #FFFFFF 0%, #FFA73D 100%);
width:200px;
height:50px;

}

.bottomlefttoright
{
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FF7E03 100%);
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FF7E03 100%);
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FF7E03 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FF7E03));
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FF7E03 100%);
background-image: linear-gradient(to left, #FFFFFF 0%, #FF7E03 100%);
width:200px;
height:50px;

}


.actualgradient
{
background-image: -ms-linear-gradient(top, #FFB463 0%, #FF7E03 100%);
background-image: -moz-linear-gradient(top, #FFB463 0%, #FF7E03 100%);
background-image: -o-linear-gradient(top, #FFB463 0%, #FF7E03 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFB463), color-stop(1, #FF7E03));
background-image: -webkit-linear-gradient(top, #FFB463 0%, #FF7E03 100%);
background-image: linear-gradient(to bottom, #FFB463 0%, #FF7E03 100%);
width:200px;
height:100px;

}

Answer 1

您可以应用具有不同background-position和的多个渐变background-size.

不要让两个较小的渐变渐变为纯色,而应将其更改为具有alpha通道的rgba值0.然后将它们叠加在较大的渐变之上,这样当它们水平移动时它们的颜色会混合在一起.

注意渲染顺序,首先声明的渐变将出现在其他顶部.

此外,添加否,background-repeat因此第一个渐变不会再次渲染第二个渐变.

的jsfiddle

CSS

.actualgradient
{
    background-image: linear-gradient(to left, rgba(0,0,0,0) 0%, #FFA73D 100%),
                      linear-gradient(to left, rgba(0,0,0,0) 0%, #FF7E03 100%), 
                      linear-gradient(to bottom, #FFB463 0%, #FF7E03 100%);

    background-size: 100% 50%, 100% 50%, 100% 100%;
    background-position: 0 0, 0 100%, 0 0;
    background-repeat: no-repeat;
}