Я пишу всплывающую подсказку и хочу, чтобы всплывающая подсказка была размыта.Он работает неправильно, когда я добавляю некоторые свойства 'padding, border-radius'.
Изображение 1: Неверно
Есть область, которая не размыта
Рисунок 2: Удален отступ, радиус границы
Попробуйте без ANGULAR (w3school)
Я уже пробовал без Угловой Это тоже выглядит неправильно. Если вы увидите в левом верхнем углу, вы увидите, что это не размытие
DEMO Link
c1.component.css
#tooltip {
/* Add the blur effect */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* Properties */
position: absolute;
left: 467px;
height: auto;
background-color: rgba(255, 255, 255, 0.788);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
opacity: 1;
transition: 0.13s;
}
Я не знаю, почему этот код в Angular показывает некоторое размытие.Есть несколько способов справиться с областью не размытия.
Демонстрация Stackblitz 1: тоже неправильно
Поскольку @Gosha_Fighten предоставляет проект stackblitz, проблема по-прежнему выглядит, как показано ниже
Изображение 3: увеличенное
Изображение 4: ширина автоматически
Изображение 5: ширина установлена на 150 пикселей (ОК)
Изображение 6: все еще нетразмыто сверху
