身体背景颜色:多个侧面和方向

时间:2017-06-21 05:32:22

标签: html css css3 background-color

我试图在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>

2 个答案:

答案 0 :(得分:0)

查看以下代码。或者告诉我要设置为背景颜色的颜色。

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>

答案 1 :(得分:0)

我使用了repeating选项。这是片段:

&#13;
&#13;
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%);
        } 
&#13;
 <div style="border: 1px solid black; background-color: White; margin-top: 150px"
        class="container">
       
        test test
    </div>
&#13;
&#13;
&#13;