CSS：反向重复线性渐变
[英]CSS: Repeat a linear gradient inversely
问题描述
Is there a way to have every alternating repeat of a gradient background go inverse? 
有没有办法让渐变背景的每个交替重复相反？ At the moment I have the following 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>
Currently it goes from blue to white top to bottom but as I scroll down it repeats again from blue to white Eg. 目前它从蓝色到白色从上到下，但随着我向下滚动，它再次从蓝色重复到白色Eg。 blue->white; blue->white; blue->... blue->white; blue->white; blue->... . blue->white; blue->white; blue->... I would like it to go from blue -> white -> blue -> white ->... . 我希望它能从blue -> white -> blue -> white ->...
3 个解决方案
解决方案1
3 已采纳 2016-08-10 07:31:39
You can use repeating-linear-gradient to achieve it as follows: 您可以使用repeating-linear-gradient来实现它，如下所示：
html { background: white; background: repeating-linear-gradient(blue, white 100vh, white 100vh, blue 200vh); height: 1980px; } body { height: 100%; margin: 0; }
解决方案2
0 2016-08-10 07:27:58
remove the height:100%; 去除高度：100％; from body and check it 从身体和检查它
or check this website to make your page prettier http://colorzilla.com/gradient-editor 或者查看本网站，使您的网页更漂亮http://colorzilla.com/gradient-editor
解决方案3
0 2016-08-10 08:42:04
I understand you have that background and at some action, you want the inverse effect. 我知道你有这样的背景，并且在某些动作中，你想要反效果。 For this you can use transform: scaleY(-1) . 为此，您可以使用transform: scaleY(-1) 。 You can use the gradient in a pseudo-element, in :before{} to prevent child element from inheriting parent styles. 您可以在: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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.