Как создать повторяющийся эффект полоскового фона фона?

Question

Я пробовал это, но это не дает эффекта, который я хочу.

background: repeating-linear-gradient(0, #222, #111 5px, #333 1px); 

То, что я хотел бы, чтобы иметь фон быть # 222, а затем каждый 5px спускаясь страницы, я хотел бы иметь высоту 1px горизонтальной линии, # 333 цвет. Я продолжаю пробовать разные комбинации, но я не могу заставить его работать. Обратите внимание, что это просто необходимо для современных браузеров IE9 +.

Answer 1

Нечто подобное может быть самым простым методом.

body { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #fff; 
 
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, #f00 5px, transparent 5px); 
 
}

Answer 2

Вы читали документ о повторяющемся линейном градиенте?

Если вы пытаетесь пример они дают, вы получите то, что работает отлично ... Просто перейдите по этой ссылке и прочитать:

https://developer.mozilla.org/fr/docs/Web/CSS/repeating-linear-gradient

Вот их пример:

background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px); 

Перейти к этой скрипке, похоже, что она работает нормально ...

http://jsfiddle.net/2o3ehav1/4/

Edit: вертикальный с цветами: http://jsfiddle.net/2o3ehav1/19/

(попробуйте изменить свой "размеры пикселя")

Надеется, что это помогает! ;)

Answer 3

Что-то похожее на это?

background: repeating-linear-gradient(0, transparent, transparent 4px, #333 5px, transparent 5px); 
background-color: #222;