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>

这是一个小提琴，使用:before伪来创建某些内容以在上添加背景，而无需在HTML代码中创建额外的元素。如果浏览器支持linear-gradient，则AFAIK也支持:before，因此此处没有问题。

http://jsfiddle.net/URWD8/

主要技巧是创建一个半尺寸的盒子并且定位良好（然后将文本内容放在这个带有z-index的绝对定位的盒子上面......通过试验和错误我承认）。

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

OT：
使用http://css-tricks.com/examples/ShapesOfCSS/和http://ie7nomore.com/#CSS2对:before和:after :)进行娱乐和/或滥用（在两个页面中搜索这些假名）

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

1 个答案: