css - 如何创建一个分成两半并朝不同方向移动的 css 背景？

Question

*更新

我相信我之前错误地解释了我的问题。我想知道是否有可能有一个从上到一半、从一半到底部有 2 个渐变的 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 channel 为 0 的 rgba 值。然后将它们叠加在较大的渐变之上，这样当您水平移动时它们的颜色就会混合在一起。

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

此外，未添加 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;
}