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>
目前它從藍色到白色從上到下，但隨着我向下滾動，它再次從藍色重復到白色Eg。 blue->white; blue->white; blue->... blue->white; blue->white; blue->... 我希望它能從blue -> white -> blue -> white ->...
3 個解決方案
解決方案1
3 已采納 2016-08-10 07:31:39
您可以使用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
去除高度：100％; 從身體和檢查它
或者查看本網站，使您的網頁更漂亮http://colorzilla.com/gradient-editor
解決方案3
0 2016-08-10 08:42:04
我知道你有這樣的背景，並且在某些動作中，你想要反效果。 為此，您可以使用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-線性漸變背景色不可重復不適用於 <tr> 如果有多個TDS
[英]CSS - Linear Gradient Background Color no-repeat is not working for <tr> if it has multiple tds
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.