Как я могу предотвратить полосу градиента CSS?

Я начал использовать CSS-градиенты, а не фактические изображения, по двум причинам: во-первых, градиент CSS определенно загружается быстрее, чем изображение, а во-вторых, они не должны показывать полосы, как и многие растровые графики. Недавно я начал тестировать свой сайт на разных экранах, а на более крупных (24 дюйма) линейный градиент CSS, составляющий фон моего сайта, показывает очень заметную полосу. Как предварительное исправление, я наложил градиент с небольшим, повторяющимся, прозрачным изображением шума PNG, что немного помогает. Есть ли другой способ исправить эту проблему с диапазоном?

Ответ 1

Я знаю, что вам не понравится звук этого, но единственный реальный способ прямо сейчас, чтобы получить согласованную кросс-браузерную эстетику в этом случае - использовать повторяющееся изображение.

Если это простой линейный градиент, вам нужно всего лишь 1 пиксель шириной и выше градиента, а затем сделать цвет фона страницы конечным цветом градиента, чтобы он работал плавно. Это будет держать размер файла маленьким.

Если вы хотите уменьшить полосы градиента в своем изображении, используйте PNG (а не прозрачность), поскольку я считаю, что для этой цели они лучше подходят, чем JPG.

В Adobe Fireworks я бы экспортировал это как PNG-24.

Удачи.

http://codepen.io/anon/pen/JdEjWm

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);
}

Ответ 2

Вы можете дать несколько лучшие результаты, сделав свой градиент от первого цвета до прозрачного, с background-color снизу для второго цвета. Я также рекомендую играть с background-size для больших градиентов, которые растягиваются по экрану, поэтому градиент фактически не заполняет весь экран.

Ответ 3

На самом деле нет способа удалить полосу. Градиенты CSS находятся во власти различных движков рендеринга браузеров. Некоторые браузеры просто оказываются лучше других. Лучшее, что вы можете сделать, это короткие области для покрытия и большие диапазоны цветов, чтобы увеличить шаги градиента. Затем подождите, пока улучшится браузер.

Ответ 4

Я сделал "scatter.png", чтобы поставить свой градиент. Вот так:

Открыть gimp
Изображение 100x100
Добавить альфа-канал
Фильтры → Шум → Hurl... Принимать значения по умолчанию
Установите opactity на 5%

Сохранить, а затем добавить в градиент.

background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);

Это тонкое воздействие на тонкий эффект.

Ответ 5

Для чистого ответа CSS вы можете использовать фильтр размытия, чтобы добавить размытие в градиент css и облегчить полосу. Это может означать некоторую перестройку иерархии, чтобы не размыть содержимое, и вам нужно скрыть переполнение, чтобы получить четкие края. Работает очень хорошо на анимационном фоне, где проблема с диапазоном может быть особенно тяжелой.

.blur{
  overflow:hidden;
  filter: blur(8px);
}