Я хочу использовать линейный цвет фона градиента для веб-сайта. Например, цвет градиента начинается с заголовка и заканчивается нижним колонтитулом. Теперь проблема заключается в том, что, поскольку разные страницы имеют разное количество контента, поэтому высота страниц меняется. Итак, в этом случае, как я могу установить конечную точку цвета? Например, я хочу, чтобы градиент от #b68d4c до #f6e7cf.CSS - Как задать цвет фона градиента для разных высот
Использование изображения: Вы должны будете выяснить высоту содержимого, которое вы хотите, чтобы покрыть кратчайшее. Затем в своем графическом редакторе создайте свой градиент. Поскольку он линейный, вы можете создать его примерно как 10px wide на 500px tall (если 500px - самая короткая высота) и повторить его вдоль оси x. После того, как ваш образ будет создан, вы бы тогда написать в вашем CSS:
body {
background:#f6e7cf url(path/to/gradient.jpg) top left repeat-x;
}
Замечание: при #f6e7cf должен быть завершающим цвет градиента. Что это делает, если страница выше 500 пикселей, она будет показывать тот же цвет, что и нижняя часть градиента, создавая иллюзию, что она продолжается.
Использование CSS3 Как Райан Касас отметил, используя Colorzilla Gradient Editor это самый простой способ я нашел (хотя, вы не узнаете, как хорошо, потому что вы не рука кодирования, но это другое обсуждение). По существу, вы бы поставили свои два цвета на 0% и 100%, убедитесь, что он идет вертикально, и скопируйте код в селектор body { }.
Используйте% на градиентах. Здесь у вас есть генератор: http://www.colorzilla.com/gradient-editor/
Эти решения имеют обратную сторону изображения. Он также предлагает совместимость с браузером. Я использую его для своих проектов. ;) –
Вы используете градиенты css3 или изображение? – motoxer4533
Я хочу использовать изображение, но если его невозможно с изображением, я могу использовать css3. – Billa
Прочтите мой ответ. –