複数の背景色、画像をCSSで

Question

div複数の背景色や画像をCSSに与えるにはどうすればよいですか？たとえば、上部を赤、中間を青、下を緑にします。

Answer 1

単一linear-gradient背景が

background: linear-gradient(to bottom, 
    red 0, red 33.33%, 
    blue 0, blue 66.66%, 
    green 0, green 100% 
); 

Example十分であるとして| Browser support

Answer 2

css3のグラデーションが使用されます。

YourDIVID { 
    background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(red, yellow, green); /* Standard syntax */ 
} 

Answer 3

TOP、BOTTOM、ビルドアップ配線板等行

#multiple { 
width: 700px; 
height: 500px; 
background:linear-gradient(red, yellow, green, blue, purple, orange); 

}

センター複数色チュートリアル

Answer 4

:before and :after pseudo element rulesを使用すると、1つの要素に3つの異なる背景レイヤー（色と画像）を持たせることができます。

注：このソリューションでは、含まれている要素を背景の上に収める必要があります。そうでなければ、リンクはクリック可能ではなく、テキストは選択できません。

実際の例のコードスニペットを実行します。

.layered-backgrounds { 
 
    background-color: #C63; 
 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    position: relative; 
 
    height: 400px; 
 
    z-index: 1; 
 
} 
 

 
.layered-backgrounds:before { 
 
    position: absolute; 
 
    content: " "; 
 
    top: 0; 
 
    height: 120px; 
 
    width: 100%; 
 
    background: #39C; 
 
    z-index: 2; 
 
    opacity: 0.8; 
 
} 
 

 
.layered-backgrounds:after { 
 
    position: absolute; 
 
    content: " "; 
 
    bottom: 0; 
 
    height: 120px; 
 
    width: 100%; 
 
    background: #9C3; 
 
    z-index: 3; 
 
    opacity: 0.8; 
 
} 
 

 
.layered-backgrounds .content { 
 
    position: relative; 
 
    z-index: 4; 
 
}

<div class="layered-backgrounds"> 
 
    <div class="content"> 
 
     <a href="#">Clickable</a> and selectable contents. 
 
    </div> 
 
</div>