2016-04-26 4 views
2

Hi,Как работают проценты в повторяющемся линейном градиенте?

Я пытаюсь воспроизвести этот узор: http://imgur.com/dqBe7TX, но я не понимаю, как работают проценты. Я попробовал много комбинаций, и это самое близкое, что я могу получить:

background:repeating-linear-gradient(#fafafa 0%, #e9e6d6 100%) repeat 0% 0%; 

но еще не совсем там. Суммы acolor ошибочны, и я до сих пор не понимаю логики. Что означают проценты в коде?

спасибо.

ответ

1

Проценты - это цветовые остановки, которые объявляют, где начинаются цвета. Если у вас, однако, есть две цветовые остановки с одинаковым процентом, переход происходит мгновенно. Here's a pretty good article on CSS3 gradients.

По той причине, почему начальные и конечные цвета не требуют проценты:

Обратите внимание, что первый и последний цвет остановки не указать местоположение; из-за этого значения 0% и 100% автоматически присваиваются соответственно первому и последнему цветам. MDN.

Попробуйте код ниже:

body { 
 
    height: 100vh; 
 
    background-color: red; 
 
    background-image: 
 
    linear-gradient(
 
     to right, /* direction of the linear-gradient */ 
 
     #181817, /* initial color */ 
 
     #181817 45%, /* immediate transition to #fafafa */ 
 
     #fafafa 45%, /* immediate transition to #fafafa */ 
 
     #fafafa 55%, /* immediate transition to #181817 */ 
 
     #181817 55% /* immediate transition to #181817 */ 
 
    ); 
 
}

+0

я уже знал, что статья, но я не совсем понимаю пока. Почему в вашем примере первый цвет не получает никакого процента? –

+0

Это можно остановить, потому что подразумевается, что начальный цвет начинается с 0%. В этом примере '# 181817' эквивалентен' # 181817 0% '. Если вы отредактируете его как таковой, вы увидите, что у вас будет тот же результат. Это также имеет место, если у вас последний цвет без процента. Предполагается, что он находится в конце или на 100%. – timolawl

+0

Может ли это быть пикселями вместо процентов? –

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

  • Нет связанных вопросов^_^