CSS, чтобы размыть цвет фона в светлый, непрозрачный синий

65
7

У меня есть div, который сидит в другом div, который я пытаюсь покрасить фон, и #0F7BD5 он будет около 50% сплошного цвета #0F7BD5, а затем размывается в более прозрачную версию этого цвета. Я придумал этот CSS, но он показывает резкий край вместо эффекта размытия/затухания, который я пытаюсь создать. Это CSS, который я придумал:

position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
-webkit-background-background-image: -webkit-linear-gradient(-180deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: -moz-linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);

Цвета между ними не имеют значения, пока он начинается с этого #0F7BD5 без прозрачности и заканчивается этим rgba(15,123,213,0.15).

спросил(а) 2021-01-19T11:42:45+03:00 9 месяцев, 1 неделя назад
1
Решение
65

Нет необходимости указывать дополнительные позиции остановки цвета, если цвета между ними не имеют значения. Просто укажите начальный и конечный цвета, и этого должно быть достаточно (сначала div в фрагменте). Браузер будет автоматически разделять цвета равномерно и постепенно.

При добавлении дополнительных позиций цвет-стоп между ними, градиент вынужден иметь определенный цвет в указанной точке, и это создает резкий эффект края (вторая div в сниппет). Острые края создаются из-за неравномерного распределения цветов. Например, для первых 40% градиента альфа изменяется от 1 до 0,7, а для следующих 5% (40-45%) он внезапно падает на 0,1.

div {
position: relative;
display: inline-block;
height: 200px;
width: 200px;
}
#gradual:after {
position: absolute;
content: '';
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-image: linear-gradient(270deg, #0F7BD5, rgba(15, 123, 213, 0.15));
}
#sharp:after {
position: absolute;
content: '';
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15, 123, 213, 0.7) 40%, rgba(15, 123, 213, 0.6) 45%, rgba(15, 123, 213, 0.52) 50%, rgba(15, 123, 213, 0.4) 55%, rgba(15, 123, 213, 0.3) 59%, rgba(15, 123, 213, 0.2) 63%, rgba(15, 123, 213, 0.15) 100%);
}
<div id="gradual"></div>
<div id="sharp"></div>

ответил(а) 2021-01-19T11:42:45+03:00 9 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема