Question 1

Какие функции CSS filter доступны?

Accepted Answer

CSS filter поддерживает: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate и sepia. Вы можете комбинировать несколько фильтров в одном свойстве filter, они применяются в порядке перечисления.

Question 2

Влияет ли свойство CSS filter на производительность?

Accepted Answer

CSS-фильтры ускорены GPU в современных браузерах, но сильное blur или несколько наложенных фильтров могут влиять на производительность рендеринга, особенно на мобильных устройствах. Для анимаций используйте will-change: filter для оптимизации.

Question 3

Могу ли я применить CSS-фильтры только к фону (не к дочерним элементам)?

Accepted Answer

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

Question 4

В чём разница между filter: opacity() и свойством opacity?

Accepted Answer

Оба управляют прозрачностью, но filter: opacity() использует аппаратное ускорение и может сочетаться с другими функциями filter. Свойство opacity проще и создаёт новый контекст наложения. Для одиночной прозрачности обычно предпочитают свойство opacity.

Question 5

Можно ли применять CSS-фильтры к элементам SVG?

Accepted Answer

Да. CSS-фильтры применяются к SVG-элементам так же, как к HTML-элементам. Кроме того, SVG имеет собственные примитивы фильтров (feBlur, feColorMatrix и др.), которые обеспечивают более тонкий контроль по сравнению с сокращениями CSS filter.

Генератор CSS-фильтров

Фильтры

Часто задаваемые вопросы

Comments & Feedback