使用CSS显示两个不同的渐变作为背景？ [英] Showing two different gradients as a background using CSS?

问题描述

我想在我的网站的背景中有2个不同的渐变 - 我使用以下方法来调用一个渐变 - 如何声明多个渐变（即在左边显示不同的渐变，在左边显示不同的渐变右）

  body 
 {
 
背景：-webkit-gradient顶部，左下，从（＃E0E0E0）到（#fff））; 
 background：-moz-linear-gradient（top，＃E0E0E0，#fff）; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃E0E0E0'​​，endColorstr ='＃ffffff'）; 
 
 
} 
  

所以我想让左侧

任何想法？

干杯！

解决方案

 <更新您的问题后
您应该使用[多背景]（http://www.w3.org/TR/css3-background/#layering）
声明，其中第一个和第二个值之间用逗号分隔，例如
`background：value1，value2;`。 
 
上面的背景（这里是一个渐变）应该是不是完全恢复
第一个或有一些透明度，显然。 
< / void> 
  

下面是使用：before 无需在HTML代码中创建额外元素即可在上创建粘贴背景。如果浏览器支持 linear-gradient ，那么还支持：before ，所以AFAIK没有问题。 p>

http://jsfiddle.net/URWD8/

主要诀窍是创建一个半角尺寸和定位（然后文本内容超过这个绝对定位的盒子与z-index ...通过试错法

还可以使用其他供应商前缀的声明： -o - 一个无前缀 linear-gradient 为IE10和未来版本的其他浏览器。请参见 http://caniuse.com/#feat=css-gradients

OT：

有趣和/或滥用：之前和：after :)与 http://css-tricks.com/examples/ShapesOfCSS/ 和 http://ie7nomore.com/#CSS2 （在两个网页中搜索这些伪） / p>

I want to have 2 different gradients in the background of my site - I am using the following to call one gradient - how do I declare more than one (i.e. to show a different gradient on the left and a different one on the right)

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');


}

So I want want the left side of the background to be a different colour gradient to the right.

Any ideas?

Cheers!

解决方案

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

Here's a fiddle using the :before pseudo to create something to stick a background on without creating an extra element in the HTML code. If linear-gradient is supported by a browser, then :before is also supported AFAIK so no problem here.

http://jsfiddle.net/URWD8/

The main trick is creating a box half-size and well positioned (and then having text content above this absolutely positioned box with z-index ... by trial and error I admit).

And use also declarations with the other vendor prefixes: -o- is lacking here and also the one without prefix linear-gradient for IE10 and future versions of other browsers. See http://caniuse.com/#feat=css-gradients

OT:
Fun and/or abusing of :before and :after :) with http://css-tricks.com/examples/ShapesOfCSS/ and http://ie7nomore.com/#CSS2 (search for those pseudos in both pages)

这篇关于使用CSS显示两个不同的渐变作为背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！