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

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

32
css css3 gradient linear-gradients

6 ответов

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

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

Если вы хотите уменьшить градиент полосы в изображение, используйте 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);
}
16

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

15

Я сделал "разбежится.png " поставить с моим градиентом. Вот так:

  1. открыть gimp
  2. 100x100 изображение
  3. добавить альфа-канал
  4. Фильтры - > Шум - > Бросок... Принять значения по умолчанию
  5. установите opactity на 5%

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

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

это тонкий эффект на тонкий эффект.

3

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

этот градиент создает полосу:

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);

этот градиент не делает, и выглядит так же:

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
2

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

1

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

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