CSS филтрите са мощен инструмент, който авторите могат да използват за постигане на различни визуални ефекти (нещо като филтри Photoshop за браузъра). filterСвойството CSS осигурява достъп до ефекти като размазване или промяна на цвета върху изобразяването на елемент, преди елементът да бъде показан. Филтрите обикновено се използват за настройка на изобразяването на изображение, фон или граница.
Синтаксисът е:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Има няколко функции, които да използвате за стойността:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- за прилагане на SVG филтриcustom()- "Очаквайте скоро"
Могат да се използват множество функции, разделени с интервал.
.do-more-things ( filter: blur(20px) grayscale(20%); )Функции на филтъра
За да използвате свойството на CSS филтъра, посочвате стойност за една от следните функции, изброени по-горе. Ако стойността е невалидна, функцията връща „няма“. С изключение на случаите, когато е отбелязано, функциите, които приемат стойност, изразена със знак за процент (като при 34%), също приемат стойността, изразена като десетична (като в 0,34).
Ето демонстрация, която ви позволява да играете малко с отделни филтри:
сива скала ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Преобразува входното изображение в скала на сивото. Стойността на „сумата“ определя дела на конверсията. Стойност от 100% е изцяло в сивата скала. Стойност от 0% оставя входа непроменен. Стойностите между 0% и 100% са линейни множители на ефекта. Ако параметърът „количество“ липсва, се използва стойност от 100%. Не се допускат отрицателни стойности.
сепия ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Преобразува входното изображение в сепия. Стойността на „сумата“ определя дела на конверсията. Стойност от 100% е напълно сепия. Стойност 0 оставя входа непроменен. Стойностите между 0% и 100% са линейни множители на ефекта. Ако параметърът „количество“ липсва, се използва стойност от 100%. Не се допускат отрицателни стойности.
насищам ()
filter: saturate(2); /* same as… */ filter: sature(200%);Насища входното изображение. Стойността на „сумата“ определя дела на конверсията. Стойност от 0% е напълно ненаситена. Стойност 100% оставя входа непроменен. Други стойности са линейни умножители на ефекта. Стойности над 100% са разрешени, осигурявайки супер наситени резултати. Ако параметърът „количество“ липсва, се използва стойност от 100%. Не се допускат отрицателни стойности.
hue-rotate ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Прилага завъртане на нюанса на входното изображение. Стойността на „ъгъл“ определя броя на градусите около цветния кръг, в които ще бъдат коригирани входните проби. Стойност 0deg оставя входа непроменен. Ако параметърът ъгъл липсва, се използва стойност на 0deg. Максималната стойност е 360deg.
инвертиране ()
filter: invert(100%);Инвертира пробите във входното изображение. Стойността на „сумата“ определя дела на конверсията. Стойност от 100% е напълно обърната. Стойност от 0% оставя входа непроменен. Стойностите между 0% и 100% са линейни множители на ефекта. Ако параметърът „количество“ липсва, се използва стойност от 100%. Не се допускат отрицателни стойности.
непрозрачност ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Прилага прозрачност към пробите във входното изображение. Стойността на „сумата“ определя дела на конверсията. Стойността от 0% е напълно прозрачна. Стойност 100% оставя входа непроменен. Стойностите между 0% и 100% са линейни множители на ефекта. Това е еквивалентно на умножаване на пробите на входното изображение по количество. Ако параметърът „количество“ липсва, се използва стойност от 100%. Тази функция е подобна на по-установеното свойство непрозрачност; разликата е, че с филтрите някои браузъри осигуряват хардуерно ускорение за по-добра производителност. Не се допускат отрицателни стойности.
яркост ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Прилага линеен множител за въвеждане на изображение, което го прави да изглежда повече или по-малко ярко. Стойност от 0% ще създаде изображение, което е напълно черно. Стойност 100% оставя входа непроменен. Други стойности са линейни умножители на ефекта. Стойности на сума над 100% са позволени, осигурявайки по-ярки резултати. Ако параметърът „количество“ липсва, се използва стойност от 100%.
контраст ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Регулира контраста на входа. Стойност от 0% ще създаде изображение, което е напълно черно. Стойност 100% оставя входа непроменен. Стойности над сумата над 100% са позволени, осигурявайки резултати с по-малко контраст. Ако параметърът „количество“ липсва, се използва стойност от 100%.
размазване ()
filter: blur(5px); filter: blur(1rem);Прилага размиване по Гаус към входното изображение. Стойността на „радиус“ определя стойността на стандартното отклонение към функцията на Гаус или колко пиксела на екрана се смесват един с друг, така че по-голямата стойност ще създаде повече размазване. Ако не е предоставен параметър, тогава се използва стойност 0. Параметърът е посочен като дължина на CSS, но не приема процентни стойности.
падаща сянка ()
filter: drop-shadow((2,3) ?)Прилага ефект на падаща сянка към входното изображение. Падащата сянка е ефективно размазана, компенсирана версия на алфа маската на входното изображение, нарисувана в определен цвят, композирана под изображението. Функцията приема параметър от тип (дефиниран в CSS3 Backgrounds), с изключение на това, че ключовата дума 'inset' не е разрешена.
Тази функция е подобна на по-утвърденото свойство box-shadow; разликата е, че с филтрите някои браузъри осигуряват хардуерно ускорение за по-добра производителност.
Drop-shadow също имитира естествено очертаните предмети, за разлика от box-shadowтова, че третира само кутията като своя път.
Точно както при text-shadow, няма параметър „разпространение“, който да създаде твърда сянка, по-голяма от обекта.
url ()
filter: url()Най- url()функцията е на мястото на XML файл, който указва SVG филтър, и може да включва котва с конкретна филтърен елемент. Ето урок, който работи като хубаво въведение във SVG филтрите със забавна демонстрация.
Анимиращи филтри
Тъй като филтрите са анимационни, той може да отвори вратите за цял куп забавления.
Бележки
Можете да комбинирате произволен брой функции, за да манипулирате изобразяването, но редът все още има значение (т.е. използването на grayscale()after sepia()ще доведе до напълно сив изход).
Изчислената стойност, различна от „none“, води до създаване на контекст на подреждане по същия начин, както CSS непрозрачността. Свойството на филтъра няма ефект върху геометрията на модела на полето на целевия елемент, въпреки че филтрите могат да причинят боядисване извън рамката на елемента. Всички части на целевия елемент са засегнати от филтърни функции. Това включва всяко съдържание, фон, граници, декорация на текст, контур и видим механизъм за превъртане на елемента, към който е приложен филтърът, и тези на неговите потомци. Филтрите могат да се прилагат и към вградено съдържание, като отделни текстови интервали.
Спецификацията също така въвежда filter(image-URL, filter-functions)функция на обвивка за изображение. Това ще ви позволи да филтрирате всяко изображение в момента, в който го използвате в CSS. Например можете да размажете фоново изображение, без да размазвате текста. Тази функция за филтриране все още не се поддържа в браузърите. Междувременно можете да приложите фона и филтъра към псевдоелемент, за да създадете подобен ефект.
IE собственически филтър неща
Също така използва filterсобствеността, като:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Използва се предимно за непрозрачност, когато трябва да поддържате IE 8 и по-надолу.
Повече информация
- Спецификация на W3C филтърни ефекти
- http://html5-demos.appspot.com/static/css/filters/index.html
- Галерия за филтри на Бенет Фили
- MDN Документи
- Мога ли да използвам
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Разбиране на CSS ефектите на филтъра
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 18 * | 35 | Не | 79 | 6 * |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |