9

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

body {
margin: 0;
padding: 0;
background: #333;
}
div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle farthest-side at 50% 100%, #fff, transparent);
opacity: .1;
}
<div></div>

введите сюда описание изображения

1
  • Может как костыль filter: blur() ? Конечно если градиент на бэкграунде и сверху контент то придется поизвращаться с слоями
    – Nsk
    Commented 15 нояб. 2018 в 14:01

2 ответа 2

1

Обойти нельзя, это связано с ограничениями цветопередачи, количество градаций серого ограничено цветовым пространством sRGB и их не хватает для каждого пикселя на экране.

0
1

Можно, если увеличить "промежуток" между двумя цветами. Иными словами, выбрать такие цвета, разница между которыми будет большая.

К тому же, данную проблему разные мониторы видят по разному. На обычных @1 мониторах менее заметно, на ретине больше. На мониторе с плотностью пикселей выше ретины оно вовсе ужасно заметно.

Пример ниже, в разы сглаженнее (даже на retina), так как имеет более широкий диапазон: #555 -> #111

body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle farthest-side at 50% 100%, #555, #111);
  opacity: 1;
}
<div></div>

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

Альтернативное решение

В вашем случае, если имеется фон и на него нужно наложить прозрачно-белую плешку, то можете воспользоваться box-shadow.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.