/ / Градієнтні кінці розмито при використанні піксельних вимірювань - css, css3, лінійних градієнтів

Градієнтні кінці розмиваються при використанні піксельних вимірювань - css, css3, лінійних градієнтів

Я використовую background-image: linear-gradient властивість css для створення декількох кольорових смуг для фону сайту.
Зазвичай зупинки градієнта визначаються у відсотках, але мені потрібні були пікселі на своєму сайті, тому мені вдалося змінити його на пікселі, використовуючи метод, використаний у ній шаблонів Проблема в тому, що кінець кожного кольору трохи розмитий. У Firefox вона менш помітна, але в Chrome вона дуже помітна.
Чи є спосіб вирішити це?
Я помітив, що коли я зміню "deg" від 180 до 45 кінці виглядають чудово. Але, на жаль, потрібні горизонтальні смуги :)

Мій код: http://cssdesk.com/c6mGM

Відповіді:

9 для відповіді № 1

Майже через рік, і я зіткнувся з тією ж помилкою в хромі v36. Тут я створив роботу: http://codepen.io/davidgailey/pen/ncrKB

або тут, якщо бажаєте: https://gist.github.com/davidgailey/8fc1bd1a09747429a3ad

Робота навколо використовує розмір фону, фонове положення та лінійні градієнти.

background-size: 100% 150px, 100% 150px;
background-position: 0 0, 0 bottom;
background-image:
linear-gradient(#000,#000),
linear-gradient(green, green);

Віола! приємні чіткі горизонтальні смуги. Він може використовувати деяку роботу, щоб бути більш дружньою до майбутнього.

Я сподіваюся, що ця помилка буде виправлена ​​найближчим часом, але в той же час, не забудьте скористатися моєю ручкою як початком.