CSS: Repeat a linear gradient inversely
Question
Is there a way to have every alternating repeat of a gradient background go inverse? At the moment I have the following 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. blue->white; blue->white; blue->... blue->white; blue->white; blue->... . I would like it to go from blue -> white -> blue -> white ->... .
3 answers
solution1
3 ACCPTED 2016-08-10 07:31:39
You can use repeating-linear-gradient to achieve it as follows:
html { background: white; background: repeating-linear-gradient(blue, white 100vh, white 100vh, blue 200vh); height: 1980px; } body { height: 100%; margin: 0; }
solution2
0 2016-08-10 07:27:58
remove the height:100%; from body and check it
or check this website to make your page prettier http://colorzilla.com/gradient-editor
solution3
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) . You can use the gradient in a pseudo-element, in :before{} to prevent child element from inheriting parent styles.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.