Я пробовал несколько методов. эта проблема, например, использование SVG (код того, что я сейчас пытаюсь сделать, приведен ниже), а также просто обычный div с фильтром размытия фона. Однако все они приводят к одной и той же проблеме: граница элемента размытия становится резкой, поэтому в конечном итоге он выглядит так, как показано на изображении. Вместо этого я хочу, чтобы эффект размытия выглядел так, будто он медленно сливается с изображением. Как мне добиться такого эффекта? Кроме того, я новичок в веб-разработке, поэтому был бы признателен за ответы, которые объясняют все поэтапно. Большое спасибо
Blurred Circle Effect
.container {
position: relative;
width: 100%;
height: 100vh;
background-image: url('https://via.placeholder.com/400');
background-size: cover;
}
.container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-size: inherit;
filter: blur(10px);
clip-path: circle(20% at center); /* Adjust the circle size */
pointer-events: none; /* Prevent interaction with the pseudo-element */
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... cific-spot
