二つの異なる色は、この写真では、HTML

Question

内のコンテナです - サンプル概要

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    </div> 
</nav> 

Answer 1

は、この質問を明確にすることでしたが、私が正しい場合は2にしたいですあなたが特にWH各要素に対して、このうち

.container{ 
background-color: red !important; 
} 

のようにクラス彼らの前にし、CSSの編集でクラスを参照してくださいする必要が 異なる色を持っていますブートストラップを使用してエン置くことを忘れないで通常のセットアップを上書きすることは何も後ろに重要な をすでにコメントで言っ

Answer 2

、あなたは、単にこのように線形グラデーションを使用することができます！

.back { 
 
    padding: 50px; 
 
    background-image: linear-gradient(red 40%, yellow 30%); 
 
} 
 

 
.container { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: #fff; 
 
}

<div class="back"> 
 
    <div class="container"> 
 
    </div> 
 
</div>

Answer 3

あなたはとlinear-gradientの組み合わせを使用してこれを達成できます。

.content { 
 
    height: 100px; 
 
    width: 300px; 
 
    
 
    border-width: 40px; 
 
    border-style: solid; 
 
    border-image: linear-gradient(blue 40%, red 30%) 1 round; 
 
}

<div class="content">Content</div>