css - 使用 CSS 显示两种不同的渐变作为背景？

Question

我想在我的网站背景中使用 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');


}

所以我希望背景的左侧与右侧的颜色渐变不同。

有什么想法吗？

干杯!

Answer 1

<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>

这是一个 fiddle ，它使用 :before 伪创建一些东西来粘贴背景，而无需在 HTML 代码中创建额外的元素。如果浏览器支持 linear-gradient，那么 :before 也支持 AFAIK，所以这里没问题。

http://jsfiddle.net/URWD8/

主要技巧是创建一个半尺寸的框并定位良好(然后在这个带有 z-index 的绝对定位框上方放置文本内容……我承认这是通过反复试验得出的)。

并且还使用带有其他供应商前缀的声明:此处缺少 -o-，对于 IE10 和其他浏览器的 future 版本，也没有前缀 linear-gradient .参见 http://caniuse.com/#feat=css-gradients

加时赛:
有趣和/或滥用 :before 和 :after :) http://css-tricks.com/examples/ShapesOfCSS/和 http://ie7nomore.com/#CSS2 (在两个页面中搜索那些伪造的)