CSS:反向重复一个线性渐变
CSS: Repeat a linear gradient inversely
有没有办法让渐变背景的每次交替重复都反转?目前我有以下 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 ->...
开始。
删除 height:100%;从正文中检查
或检查此网站以使您的页面更漂亮http://colorzilla.com/gradient-editor
可以使用repeating-linear-gradient
实现如下:
html {
background: white;
background: repeating-linear-gradient(blue, white 100vh, white 100vh, blue 200vh);
height: 1980px;
}
body {
height: 100%;
margin: 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>
有没有办法让渐变背景的每次交替重复都反转?目前我有以下 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 ->...
开始。
删除 height:100%;从正文中检查
或检查此网站以使您的页面更漂亮http://colorzilla.com/gradient-editor
可以使用repeating-linear-gradient
实现如下:
html {
background: white;
background: repeating-linear-gradient(blue, white 100vh, white 100vh, blue 200vh);
height: 1980px;
}
body {
height: 100%;
margin: 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>