Как сделать эффект размытия в css?

Пользователь

от guillermo , в категории: HTML/CSS , 2 года назад

Как сделать эффект размытия в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от emanuel_boyer , 2 года назад

@guillermo  Сделать эффект размытия в CSS можно через blur :


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<head>
<style>
    img{
        filter: blur(3px);
    }
    </style>
  </head>
  <body>
      <img src="image/11.jpeg">
  </body>

Пользователь

от jakayla , год назад

@guillermo 

Существует несколько способов создания эффекта размытия в CSS, в зависимости от того, какой тип размытия вы хотите создать.

  1. Размытие фона


Для создания размытого фона можно использовать свойство backdrop-filter. Например, чтобы добавить размытие фона элементу с классом blur на 10 пикселей, можно использовать следующий CSS-код:

1
2
3
.blur {
  backdrop-filter: blur(10px);
}


  1. Размытие текста


Чтобы создать эффект размытия текста, можно использовать свойство text-shadow. Например, чтобы добавить размытие тексту элемента с классом blur-text на 1 пиксель, можно использовать следующий CSS-код:

1
2
3
.blur-text {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}


  1. Размытие элемента


Чтобы создать эффект размытия всего элемента, можно использовать свойство filter. Например, чтобы добавить размытие элементу с классом blur-element на 5 пикселей, можно использовать следующий CSS-код:

1
2
3
.blur-element {
  filter: blur(5px);
}


Обратите внимание, что свойство filter может замедлить производительность, если применяется к большим элементам или к большому количеству элементов на странице.