CSS: Повторите линейный градиент обратно

Есть ли способ, чтобы каждый чередующийся повтор градиентного фона возвращался обратно? На данный момент у меня есть следующие 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>

В настоящее время она идет от синего до белого сверху вниз, но, как я прокручивать вниз снова повторяется от синего до белого Ев. blue->white; blue->white; blue->.... Я бы хотел, чтобы он пошел от blue -> white -> blue -> white ->....

источник

2016-08-10 Barry Michael Doyle

почему бы не сделать что-то вроде фона: линейно-градиент (синий, белый, синий); и отрегулировать от этого? –

Вот что-то похожее. Я понимаю, что у вас есть этот фон и при каком-то действии вы хотите получить обратный эффект, не так ли? http://stackoverflow.com/questions/19318534/inheriting-the-inverse-gradient-of-the-elements-background –

Вы можете использовать repeating-linear-gradient для достижения его следующим образом:

html { 
 
    background: white; 
 
    background: repeating-linear-gradient(blue, white 100vh, white 100vh, blue 200vh); 
 
    height: 1980px; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
}

источник

2016-08-10 07:31:39

Спасибо, что сработало отлично :) –

@BarryDoyle приветствуется) –

удалить высоту: 100%; от тела и проверить его

или проверить этот сайт, чтобы сделать вашу страницу похорошела http://colorzilla.com/gradient-editor

источник

2016-08-10 07:27:58 mosawi

Я понимаю, у вас есть этот фон и при каком-то действии вы хотите получить обратный эффект. Для этого вы можете использовать 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>

источник

2016-08-10 08:42:04

CSS: Повторите линейный градиент обратно

ответ

Смежные вопросы