Как сделать полоски при использовании repeating-linear-gradient тоньше?

Question

[Ольга Жижка]

Всем добрый день. Прощу помогите разобраться с repeating-linear-gradient. Делаю фон футера полосатым, но никак не могу настроить толщину полосок. Вот пример, что у меня получилось, но в самом макете высота футера не задается.

https://jsfiddle.net/helgaj/AYB26/20/

Хотелось бы, чтобы получились тонкие полоски на небольшом расстоянии, 20-30px.
Спасибо заранее за помощь)

Answer 1

[Евгений Петров]

Технически можно было бы сделать так

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 29px,
	rgba(255, 255, 255, .5) 29px,
	rgba(255, 255, 255, .5) 30px
);

Однако, в webkit будет совсем не то, что ожидалось.
Судя по всему, это — баг движка (очередной — на заметку тем, кто по инерции говорит о багнутости Firefox).
Исправляется указанием размера картинки. Остаётся только учесть, что вы указываете размер не исходной, а уже трансформированной картинки. Так, при повороте на 45° размер картинки должен быть в √2 больше, чем исходный размер.

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 29px,
	rgba(255, 255, 255, .5) 29px,
	rgba(255, 255, 255, .5) 30px
);
background-size: 42px 42px;

И остаётся небольшой минус — небольшие разрывы или сдвиги при несовпадении (опять же в webkit), и избежать этого для такого поворота не получится.

Для исправления этих несовпадений можно использовать решение, хотя код при этом слегка вырастет. С другой стороны, ширина полос остаётся постоянной, а расстояние между ними управляется с помощью размера картинки (не забываем про соотношение сторон при трансформации).

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 25%,
	rgba(255, 255, 255, .5) 25%,
	rgba(255, 255, 255, .5) calc(25% + 1px),
	transparent calc(25% + 1px),
	transparent 75%, rgba(255, 255, 255, .5) 75%,
	rgba(255, 255, 255, .5) calc(75% + 1px),
	transparent calc(75% + 1px),
	transparent
);
background-size: 40px 40px;

Answer 2

[Roman]

Как я понимаю эта функция зависит о разрешения экрана, что видно просто меняя размер контейнера Result в jsfiddle. Научным методом тыка получился такой, наиболее стабильный вариант

.footer{
    width: 100%;
    height: 300px;
    color: #adadad;
    background-color:  rgba(0, 0, 0, .85);
    background-image: repeating-linear-gradient( -45deg, 
        transparent, transparent 0.27em, 
        rgba(51, 51, 51, .5) 0.001em, rgba(51, 51, 51, .5) 1em
    );
}