Как размыть картинку CSS

Для размытия картинки в CSS можно использовать свойство filter с значением blur. Значение blur() определяет степень размытия элемента.

Пример:

HTML:

<img src="my-image.jpg" class="blur-image">

CSS:

.blur-image {
  filter: blur(5px);
}

В данном случае, все картинки с классом .blur-image будут размыты на 5 пикселей.

Обратите внимание, что свойство filter не поддерживается всеми браузерами. Кроме того, при использовании этого свойства стоит иметь в виду, что это может существенно повлиять на производительность страницы, особенно на мобильных устройствах.

Также можно использовать различные значения для эффекта размытия, например, blur(2px)blur(10px)blur(0.5rem) и т.д.

Надеюсь, эта информация будет полезна!

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как размыть картинку CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали