0

*更新

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

Div 在上半部分从颜色 A1 到 A5，而下半部分从 A6 到 A10。

同时，div的上半部分从颜色A1-A5变为颜色B（从左到右）

虽然 div 的下半部分从颜色 A6-A10 变为颜色 B（从左到右）

任何帮助将不胜感激，

谢谢

*更新 2

所以基本上这个，仅作为一个例子：

http://jsfiddle.net/guiissasso/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;

}

4

3 回答 3

5

background-position您可以使用不同的和应用多个渐变background-size。

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

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

此外，添加 nobackground-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;
}
于 2013-09-07T16:28:19.710 回答
1

您可能可以使用此站点生成所需的内容：http: //www.colorzilla.com/gradient-editor。

这是我生成的一个快速（而且非常丑陋）的示例：

background: #fff832; /* Old browsers */
background: -moz-linear-gradient(top, #fff832 0%, #ff28fb 50%, #ff28fb 50%, #000000 50%, #2414ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff832), color-stop(50%,#ff28fb), color-stop(50%,#ff28fb), color-stop(50%,#000000), color-stop(100%,#2414ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff832 0%,#ff28fb 50%,#ff28fb 50%,#000000 50%,#2414ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff832 0%,#ff28fb 50%,#ff28fb 50%,#000000 50%,#2414ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fff832 0%,#ff28fb 50%,#ff28fb 50%,#000000 50%,#2414ff 100%); /* IE10+ */
background: linear-gradient(to bottom, #fff832 0%,#ff28fb 50%,#ff28fb 50%,#000000 50%,#2414ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff832', endColorstr='#2414ff',GradientType=0 ); /* IE6-9 */
于 2013-09-06T19:48:38.967 回答
0

这应该可以帮助您生成所需的任何背景：http ://colorzilla.com/gradient-editor/

于 2013-09-06T19:45:30.477 回答