CSS: повторите линейный градиент обратно

Есть ли способ, чтобы каждое чередующееся повторение градиентного фона шло обратно? На данный момент у меня есть следующий CSS: 

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

  background-size: cover;
  height: 100%;
}

body {
  height: 100%;
}
<html>
  <head>
  </head>
  <body
    Hello world
  </body>
</html>

В настоящее время он переходит от синего к белому сверху вниз, но когда я прокручиваю вниз, он снова повторяется от синего к белому, например. blue->white; blue->white; blue->... . Я бы хотел, чтобы он шел от blue -> white -> blue -> white ->... .

3 3
html css css3 linear-gradients

3 ответа:

Вы можете использовать repeating-linear-gradient достичь его можно следующим образом: 

html {
  background: white;
  background: repeating-linear-gradient(blue, white 100vh, white 100vh, blue 200vh);
  height: 1980px;
}

body {
  height: 100%;
  margin: 0;
}
3

Снимите высоту: 100%; с корпуса и проверьте ее

Или проверьте этот сайт, чтобы сделать вашу страницу красивее http://colorzilla.com/gradient-editor

0

Я понимаю, что у вас есть этот фон, и в каком-то действии вы хотите обратного эффекта. Для этого можно использовать transform: scaleY(-1). Вы можете использовать градиент в псевдо-элементе, в :before{}, чтобы предотвратить наследование родительских стилей дочерним элементом.

div{
  height: 100px;
  width:100%;
  float:left;
  margin-top:20px;
}
.div1 {
  background: white; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(blue, white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(blue, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(blue, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(blue, white); /* Standard syntax */
  background-size: cover;
}

.div2 {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
 <body>
<div class="div1"></div>
<div class="div1 div2"></div>
</body>
0