CSS3 Градиенты по пикселям вместо процента

Я хочу создать линейный фон градиента, который соответствует тому же размеру окна браузера, чтобы разместить заголовок с фиксированной высотой, подзаголовок и содержимое div.

Моя проблема: я не хочу, чтобы градиент масштабировался, когда я перемещаю страницу вокруг. Я мог бы использовать изображение шириной 1 пиксель, чтобы получить тот же результат, я полагаю, но в конечном итоге я хочу, чтобы сайт был как можно меньше изображений, за исключением логотипа.

Можно ли использовать градиент, определяемый пикселем, вместо градиента, определенного по процентам?

Ответ 1

Да, вы можете. Вместо процентов можно заменить стандартные единицы. См. Этот пример:

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%);

Обновление

Чтобы использовать приведенный выше пример, вам необходимо включить префикс браузера. Они будут указаны следующим образом:

background-image: -webkit-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);
background-image: -moz-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);
background-image: -o-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);
background-image: -ms-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);
background-image: linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);

Ответ 2

Если вы хотите иметь градиент фиксированного размера, используйте свойство background-size, чтобы указать его размер.