it-swarm.com.ru

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

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

34
John Doe

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

Если это простой линейный градиент, то вам нужно, чтобы он был шириной всего в 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);
}
18
Michael Giovanni Pumo

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

16
AlexKempton

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

  1. Открытый каркас
  2. Изображение 100x100
  3. Добавить альфа-канал
  4. Фильтры -> Шум -> Hurl ... Принять значения по умолчанию
  5. Установите непрозрачность до 5%
  6. Сохранить, а затем добавить в градиент.

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

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

4
Michael Cole

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

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

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
Allan of Sydney

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

1
Scott

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

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