1

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


}

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

有任何想法吗？

干杯!

4

1 回答 1

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浏览器支持，那么:beforeAFAIK也支持，所以这里没问题。

http://jsfiddle.net/URWD8/

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

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

OT：使用http://css-tricks.com/examples/ShapesOfCSS/和http://ie7nomore.com/#CSS2
玩弄 和/或滥用:beforeand : )（在两个页面中搜索那些伪代码）:after

于 2012-06-15T07:08:39.673 回答