Question

有没有办法让渐变背景的每个交替重复相反？目前我有以下CSS：

＆＃13;

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%;
}

＆＃13;

<html>
  <head>
  </head>
  <body
    Hello world
  </body>
</html>

＆＃13;

目前它从蓝色到白色从上到下，但随着我向下滚动，它再次从蓝色重复到白色Eg。 blue->white; blue->white; blue->...。我希望它从blue -> white -> blue -> white ->...开始。

Answer 1

您可以使用repeating-linear-gradient来实现它，如下所示：

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

Answer 2

移除高度：100％;来自身体并检查它

或查看此网站，使您的网页更漂亮http://colorzilla.com/gradient-editor

Answer 3

我知道你有这样的背景，并且在某些动作中，你想要反效果。为此，您可以使用transform: scaleY(-1)。您可以在:before{}中使用伪元素中的渐变来防止子元素继承父样式。

＆＃13;

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);
}

＆＃13;

 <body>
<div class="div1"></div>
<div class="div1 div2"></div>
</body>

＆＃13;

CSS：反向重复线性渐变

3 个答案: