体の背景色：複数の横方向と道順

Question

hereのように、複数の方向に複数の横向きの背景色を作成しようとしていました。

私はbackground: -webkit-linear-gradient(top left, white,white 80%,#000099,#000099 20%);で作業しようとしていましたが、これは一方向に複数のCSS背景色を作成します。私が本当に必要とするのは、firebaseの背景のようなものです。

ヒントこれは私の裁判です：

html { 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    /*background-color: #f3f3f3;*/ 
 
    background: -webkit-linear-gradient(top left, white,white 80%,#000099,#000099 20%); 
 
}

<div style="border: 1px solid black; background-color: White; margin-top: 150px" class="container"> 
 
    test test 
 
</div>

Answer 1

は、次のコードを見てください。または、背景色として設定する色を教えてください。

html { 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    /*background-color: #f3f3f3;*/ 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,d84953+40,05abe0+100 */ 
 
    background: rgb(135,224,253); /* Old browsers */ 
 
    background: -webkit-linear-gradient(left, rgba(135,224,253,1) 0%, rgba(216,73,83,1) 40%, rgba(5,171,224,1) 100%); 
 
    background: -moz-linear-gradient(left, rgba(135,224,253,1) 0%, rgba(216,73,83,1) 40%, rgba(5,171,224,1) 100%); 
 
    background: -o-linear-gradient(left, rgba(135,224,253,1) 0%, rgba(216,73,83,1) 40%, rgba(5,171,224,1) 100%); 
 
    background: linear-gradient(to right, rgba(135,224,253,1) 0%, rgba(216,73,83,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=1); /* IE6-9 */ 
 
}

<div style="border: 1px solid black; background-color: White; margin-top: 150px" class="container"> 
 
    test test 
 
</div>

Answer 2

私はrepeatingオプションを使用していました。

html 
 
     { 
 
      -webkit-background-size: cover; 
 
      -moz-background-size: cover; 
 
      -o-background-size: cover; 
 
      background-size: cover; 
 
      height: 100%; 
 
      min-height: 100%; 
 
     } 
 
     body 
 
     { 
 
      background: -webkit-repeating-linear-gradient(45deg, 
 
    #9900CC, 
 
    #9900CC 40%, 
 
    #000099 40%, 
 
    #000099 80%); 
 
     }

<div style="border: 1px solid black; background-color: White; margin-top: 150px" 
 
     class="container"> 
 
     
 
     test test 
 
    </div>