使用 CSS 显示两个不同的渐变作为背景？答案

【问题标题】：Showing two different gradients as a background using CSS?使用 CSS 显示两个不同的渐变作为背景？
【发布时间】：2012-06-15 16:25:38
【问题描述】：

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


}

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

有什么想法吗？

干杯！

【问题讨论】：

@sandeep 和 OP 他们是 - 在编辑之前 - 2 行上的 2 -webkit-linear-gradient 值还是已经 webkit 和 moz？我的回答假设我看到了 2 个 webkit 值，但现在我对此表示怀疑（再给我一杯咖啡！）
抱歉，我没有说清楚 - 更新了问题
现在很清楚了，谢谢（我一开始也误读了你的问题）
@Franco 我根据您编辑的问题用小提琴编辑了我的答案。

标签： css gradient

【解决方案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>

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

http://jsfiddle.net/URWD8/

主要技巧是创建一个半尺寸且定位良好的盒子（然后在这个绝对定位的盒子上方加上 z-index 的文本内容......我承认通过反复试验）。

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

OT：
:before 和 :after 的乐趣和/或滥用 http://css-tricks.com/examples/ShapesOfCSS/ 和 http://ie7nomore.com/#CSS2 :) （在两个页面中搜索那些伪）

【讨论】：