Как я могу плавно смешать изображение переднего плана (человека) с фоном страницы, используя маскирование или смешивание ⇐ Html

[Anonymous]

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

Код: Выделить всё

    .morphed-outline {
width: 100%;
height: 500px;
object-fit: cover;
object-position: center 5%;
mask-image: radial-gradient(
ellipse at center,
black 40%,
transparent 60%
);
}

Текущий результат:
Изображение появляется, но градиентная маска просто затемняет его часть, а не смешивает края с фоном страницы. Это не дает эффекта «бесшовного морфинга», к которому я стремлюсь.
Чего я пытаюсь достичь:
Плавное наложение или плавное плавное плавное наложение или плавное затухание, при котором края фигуры естественным образом сливаются с фоном — аналогично тому, что вы можете увидеть в главных разделах современного портфолио, где объект тонко сливается с дизайном.
Что-то вроде этого
изображения
Что я сделал Пробовал:

• маска-изображение с линейными/радиальными градиентами
• варианты режима смешивания-наложения
• Регулировка непрозрачности и позиционирования

Вопрос:
Какой метод CSS или композитинга лучше всего подходит для плавного перехода изображения в фон (без видимого жесткого слоя) край)? Должен ли я использовать маску-изображение, режим смешивания-наложения или их комбинацию?
Дополнительный контекст:
Изображение представляет собой прозрачный PNG-изображение человека (без фона). Цвет/градиент фона задается с помощью CSS, а не изображения.

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-backgrou