Как сделать размытие изображения в css?
2 ответа
@lilla.herman Сделать размытие изображения в CSS можно следующим образом:
1 2 3 4 5 6 7 8 9 10 |
<head> <style> img { filter: blur(5px); } </style> </head> <body> <img src="путь к картинке" /> </body> |
@lilla.herman
Существует несколько способов сделать размытие изображения в CSS.
- CSS фильтр "blur()":
CSS фильтр "blur()" применяет размытие к элементу. Чтобы применить этот фильтр к изображению, вы можете использовать следующий код:
1 2 3 |
img { filter: blur(5px); } |
В этом примере "5px" - это значение размытия, которое можно настроить по вашему усмотрению.
- Свойство "backdrop-filter":
Свойство "backdrop-filter" может применять различные эффекты к заднему фону элемента. Одним из эффектов является размытие.
1 2 3 |
img { backdrop-filter: blur(5px); } |
- SVG фильтр:
Другой способ добавления размытия в CSS - это использование SVG фильтра. Вы можете определить SVG фильтр в вашем CSS файле и затем применить его к элементу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Определение SVG фильтра */ .blur-filter { filter: url(#blur); } /* Применение SVG фильтра к изображению */ img { composes: blur-filter; } /* SVG фильтр */ <svg height="0" width="0"> <filter id="blur"> <feGaussianBlur stdDeviation="5" /> </filter> </svg> |
Эти способы позволяют создать размытие на изображениях в CSS. Вы можете настроить значения размытия и другие параметры для достижения желаемого эффекта.