#html #css
Вопрос:
Я начал использовать градиенты CSS, а не реальные изображения, по двум причинам: во-первых, градиент CSS определенно загружается быстрее, чем изображение, и, во-вторых, они не должны отображать полосы, как многие растровые графики. Недавно я начал тестировать свой сайт на разных экранах, и на больших экранах (24 дюйма) линейный градиент CSS, который составляет фон моего сайта, показывает очень заметные полосы. В качестве предварительного исправления я наложил на градиент небольшое повторяющееся прозрачное PNG изображение шума, что немного помогает. Есть ли какой-либо другой способ исправить эту проблему с разбиением?
Комментарии:
1. 1) Это зависит от рендеринга браузера. 2) Это зависит от вашего монитора.
2. Я решил использовать решение, основанное на ответе @Michael Giovanni Pumo: сделайте градиент высотой 1 пиксель в Photoshop, используйте размытие, зернистость и другие методы сглаживания, чтобы удалить полосы, и повторите его-x .
3. Совет: какую бы технику вы в конечном итоге ни использовали, убедитесь, что вы знаете о печально известной «причуде» рендеринга iOS, когда переход к прозрачному на самом деле всегда переходит в прозрачный черный. betterprogramming.pub/ … Эта давняя проблема действительно может привести к тому, что градиенты будут выглядеть плохо, и любое умное решение для исправления разбиения, которое не учитывает это, является пустой тратой времени, если вам нужно ориентироваться на пользователей iOS
Ответ №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 большими градиентами, которые растягиваются по экрану, поэтому градиент фактически не заполняет весь экран.
Комментарии:
1. Я могу подтвердить, что наложение градиента на цвет фона на самом деле работает лучше. Также попробуйте поменять местами цвет фона и цвет градиента, потому что один из вариантов, похоже, всегда выглядит лучше (webkit / blink)
2. Я никогда не думал о перекрытии 2 градиентов с прозрачной стороной с каждой стороны. Я обязательно запомню это, когда мне это понадобится!
3. Нет, этот метод на самом деле значительно ухудшил окантовку.
Ответ №3:
Я сделал «scatter.png», чтобы поместить его вместе с моим градиентом. Вот так:
- Откройте gimp
- изображение 100×100
- Добавить альфа-канал
- Фильтры -> Шум -> Отбрасывание… Принять значения по умолчанию
- Установите непрозрачность на 5%
- Сохраните, а затем добавьте в градиент.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
Это тонкий эффект на тонкий эффект.
Ответ №4:
Для чистого CSS-ответа вы можете использовать фильтр размытия, чтобы добавить размытие к градиенту css и уменьшить разбиение. Это может означать некоторую перестройку иерархии, чтобы не размывать содержимое, и вам нужно скрыть переполнение, чтобы получить четкие края. Действительно хорошо работает на анимированном фоне, где проблема с разбиением может быть особенно серьезной.
.blur{
overflow:hidden;
filter: blur(8px);
}
Комментарии:
1. Попробовал технику размытия. Производительность была крайне низкой. Один или два слоя размытия действительно улучшили качество, но с чрезмерными затратами на производительность. отображение 10 слоев с размытием 100 пикселей заняло у моего eeepc несколько минут.
Ответ №5:
Я знаю, что эта проблема давно решена, но для других, испытывающих разбиение и ищущих решение, очень простым решением для меня было просто упростить цвета, которые я включил в свой градиент. Например:
Этот градиент создает разбиение:
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%);
Ответ №6:
Я знаю, что это немного поздно, но я обнаружил трюк, который работает. Для тех, у кого есть этот грубый край в точке пересечения цветов. Это удаляет его.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
Ответ №7:
На самом деле нет никакого способа удалить разбиение. Градиенты CSS зависят от различных механизмов рендеринга браузеров. Некоторые браузеры просто отображают лучше, чем другие. Лучшее, что вы можете сделать, это покрыть короткие области и увеличить цветовые диапазоны, чтобы увеличить шаги градиента…. Затем подождите, пока улучшится разрыв браузера.
Ответ №8:
Добавьте минимальную высоту.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
вы также можете установить для background-repeat значение no-repeat, но это не обязательно.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}