logo标签列表

CSS: 反向重复线性渐变

htmlcssrepeatlinear-gradients
3

有没有办法让渐变背景的每个交替重复都反转？目前我的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 ->...。

1
为什么不尝试像这样做：background: linear-gradient(blue, white, blue); 然后进行调整呢？ - Jacob Goh
这里有类似的东西。我理解你具备那方面的背景，在某些情况下，你想要相反的效果，是吗？http://stackoverflow.com/questions/19318534/inheriting-the-inverse-gradient-of-the-elements-background - Madalina Taina
3个回答
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;
}

0
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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接