CSS - Как установить градиент цвета фона для разной высоты

Question

Я хочу использовать линейный градиент цвета фона для веб-сайта. Например, цвет градиента начинается с верхнего и заканчивается в нижнем колонтитуле. Теперь проблема в том, что, поскольку разные страницы имеют разное количество контента, высота страниц различна. Так в таком случае, как я могу установить конечную точку цвета? Например я хочу градиент от #b68d4c до #f6e7cf.

Answer 1

Использование изображения: Вам нужно будет определить кратчайшую высоту содержимого, которое вы хотите охватить. Затем в редакторе изображений создайте свой градиент. Поскольку он линейный, вы можете создать его размером примерно 10 пикселей в ширину и 500 пикселей в высоту (если 500 пикселей - самая короткая высота) и повторить его вдоль оси x. Как только ваше изображение будет создано, вы должны написать в своем CSS:

body {
    background:#f6e7cf url(path/to/gradient.jpg) top left repeat-x;
}

Примечание: #f6e7cf должен быть конечным цветом градиента. Это означает, что если страница выше 500 пикселей, она будет иметь тот же цвет, что и нижняя часть градиента, создавая иллюзию продолжения.

Использование CSS3 Как отметил Райан Касас, использование Colorzilla Gradient Editor - самый простой способ, который я нашел (хотя, вы тоже не учитесь, потому что вы не программируете вручную, но это другое обсуждение ). По сути, вы должны установить два цвета на 0% и 100%, убедиться, что они будут вертикальными, и скопировать код в селектор body { }.

Answer 2

Используйте% на градиентах. Здесь у вас есть генератор: http://www.colorzilla.com/gradient-editor/