Показване на два различни градиента като фон, използващи CSS? - css, css3, градиенти

Искам да има 2 различни градиента вфон на моя сайт - използвам следното, за да се обадя на един градиент - как да декларирам повече от един (т.е. да покаже различен градиент вляво и друг в дясно)

body
{

background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#fff));
background: -moz-linear-gradient(top,  #E0E0E0,  #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#E0E0E0", endColorstr="#ffffff");


}

Така че искам, че лявата страна на фона да е с различен цветови градиент надясно.

Някакви идеи?

Наздраве!

Отговори:

<void after update of your question>
You should use a [multi-background](http://www.w3.org/TR/css3-background/#layering)
declaration where the first and second values are separated by a comma like
`background: value1, value2;`.

Also the background on top (here a gradient) should whether not recover entirely the
first one or have some transparency, obviously.
</void>

Тук е цигулка с помощта на :before псевдото да създаваш нещо, на което да се придържате без да създавате допълнителен елемент в HTML кода. ако linear-gradient се поддържа от браузър, след това :before също така се поддържа AFAIK, така че няма проблем тук.

http://jsfiddle.net/URWD8/

Основният трик е създаването на кутия с половин размер и добре позиционирана (и след това с текстово съдържание над това абсолютно позиционирано кутийка с z-index ... от проба и грешка, която признавам).

И използвайте и декларации с другите представки на доставчиците: -o- липсва тук, а също и тази, която няма префикс linear-gradient за IE10 и бъдещите версии на други браузъри. виждам http://caniuse.com/#feat=css-gradients

О Т:
Забавление и / или злоупотреба с :before и :after :) с http://css-tricks.com/examples/ShapesOfCSS/ и http://ie7nomore.com/#CSS2 (търсете тези псевдони и в двете страници)