1

サイトの背景に 2 つの異なるグラデーションを使用したい - 次を使用して 1 つのグラデーションを呼び出しています - 複数を宣言するにはどうすればよいですか (つまり、左側に異なるグラデーションを表示し、右側に別のグラデーションを表示するには)

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を使用したand :)
の楽しさおよび/または悪用(両方のページでこれらの擬似を検索):before:after

于 2012-06-15T07:08:39.673 に答える