2つのdivのマージグラデーションの背景

Question

メインコンテナの内部に2つの異なるdivがあります。両方をヘッダ部とみなしてください。以下のようになります。

私は1つは、以下のように見えるようにと、その背景をマージしたい：

私は理想的な単一のdivを作成するが、オプションではありません私の場合にする必要があります。 どんなトリック/アイデアでもあります。

ありがとうございました。

Answer 1

背景が緑色の左から右の線形グラデーションのように見えますが、同じCSSを使用できませんbackground？あなたは異なる位置ではなく、同じ背景画像を使用することができますしたい場合は、

div1, div2 { 
    ... 
    background: linear-gradient(to right, rgba(52,247,101,1) 0%, rgba(34,115,64,1) 100%); 
    ... 
} 

か：：何かのような

div1 { 
    ... 
    background-image: url("background.png"); 
    background-position: 50% 0%; 
    ... 
} 
div2 { 
    ... 
    background-image: url("background.png"); 
    background-position: 50% 100%; 
    ... 
} 

それらは私のアイデアでした。

Answer 2

あなたの例には2つの別々のdivが含まれています。背景をマージすることはできません。緑色の例を実現するには、グラデーションの背景を持つ1つのdivと、その中に2つのdivを使用します.1つは「ダッシュボード」テキストの左に浮動し、もう1つは「フィルタ」セクションの浮動小数点です。

はこれを試してみてください：行方不明

#container { 
 
    background: #f2f2f2; /* Old browsers */ 
 
    background: -moz-linear-gradient(left, #f2f2f2 0%, #f00f00 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(left, #f2f2f2 0%,#f00f00 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to right, #f2f2f2 0%,#f00f00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2',endColorstr='#f00f00',GradientType=1); /* IE6-9 */ 
 
    width: 100%; 
 
    padding: 20px; 
 
} 
 

 
#leftDiv { 
 
    float:left; 
 
} 
 

 
#rightDiv { 
 
    float:right; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<div id="container"> 
 
    <div id="leftDiv">LEFT</div> 
 
    <div id="rightDiv">RIGHT</div> 
 
    
 
    <!-- When using floated elements, be sure to clear --> 
 
    <div class="clear"></div> 
 
    </div>