1 DIVに複数の背景色を設定

Question

私はdivを持っていますが、CSS3を使って2つの背景を水平に適用したいと思いますが、わかりません。

background: blue top no-repeat 10%; 
    background: yellow bottom no-repeat 10%; 

私は上半分を1色、下半分を別の色にします。

私はイメージでは非常に簡単に行うことができますが、私はそれを使用せずにこれを行う方法を理解できません。

Answer 1

勾配は、この使用CSS3、唯一のdivを行うには合理的に簡単な方法です：

http://jsfiddle.net/thirtydot/8wH2F/

はい、私は嘘をつきました。それは実際の勾配になりますので、私はCSS hereを生成し、そしてfilterプロパティを削除

div { 
    background: #000fff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #000fff 0%, #000fff 50%, #ffff00 50%, #ffff00 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(50%,#000fff), color-stop(50%,#ffff00), color-stop(100%,#ffff00)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* IE10+ */ 
    background: linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* W3C */ 
} 

：それが原因あなたが使用する必要が同じ事の無数の異なるベンダー接頭辞バージョンに全く非常に単純ではありませんIE6-9で。これを達成するための

Answer 2

もう一つの方法は、離れて勾配から、擬似要素を使用することです：

http://jsfiddle.net/kizu/S3LXB/

擬似要素と要素と負のz-indexにposition: relativeといくつかの正z-indexを追加し、要素の背景の上に配置されますが、要素のコンテンツの下に配置されます。そして、あなたが望むだけでポジションを取ることができます。

この方法は、グラデーションを持つものほど柔軟ではありませんが、！擬似要素のグラデーションを確実に使用することができ、より多くのエフェクトをより簡単に実現できます。