Чтобы получить загрузчик CSS с эффектом размытия фона, вы можете использовать несколько методов. Вот несколько приемов:
- Свойство CSS-фильтра:
Вы можете использовать свойствоfilter
со значениемblur()
, чтобы применить эффект размытия к фону загрузчика. Объедините это с другими свойствами CSS, такими какposition
иz-index
, чтобы создать желаемый эффект.
«»;
позиция: фиксированная;
сверху: 0;
слева: 0;
ширина: 100%;
высота: 100%;
фон: url( loader-background.jpg) center center no-repeat;
background-size: Cover;
фильтр: размытие(5px);
- Свойство CSS Backdrop-filter:
Свойствоbackdrop-filter
можно использовать для применения эффекта размытия к области позади элемента, создавая размытие фона. Однако учтите, что это свойство не поддерживается в старых браузерах.
.loader {
backdrop-filter: blur(5px);
}
- Псевдоэлементы CSS:
Вы можете использовать псевдоэлементы, такие как::before
или::after
, чтобы создать наложение, охватывающее весь экран, и применить его. эффект размытия.
«»;
позиция: фиксированная;
сверху: 0;
слева: 0;
ширина: 100%;
высота: 100%;
фон: url( loader-background.jpg) center center no-repeat;
background-size: Cover;
фильтр: размытие(5px);
z-index: 9999;
Не забудьте заменить loader-background.jpg
путем к желаемому фоновому изображению.