CSS
Свойство фильтра
Поиск…
Синтаксис
- filter: none (значение по умолчанию)
- filter: initial (по умолчанию - none);
- filter: inherit (по умолчанию - родительское значение);
- фильтр: размытие (px)
- фильтр: яркость (число |%)
- фильтр: контраст (число |%)
- filter: drop-shadow (vertical-shadow-px vertical-shadow-px shadow-blur-px shadow- - цвет распространения)
- filter: greyscale (число |%)
- фильтр: оттенок-поворот (град)
- фильтр: инвертировать (число |%)
- фильтр: непрозрачность (число |%)
- фильтр: насыщенный (число |%)
- фильтр: сепия (число |%)
параметры
| Значение | Описание |
|---|---|
| размытие (х) | Размывает изображение по пикселям x. |
| Яркость (х) | Уменьшает изображение при любом значении выше 1,0 или 100%. Ниже этого изображения будет затемнено. |
| Контраст (х) | Обеспечивает более контрастность изображения при любом значении выше 1,0 или 100%. Ниже этого изображения будет менее насыщенным. |
| drop-shadow (h, v, x, y, z) | Дает изображение тень. h и v могут иметь отрицательные значения. x, y и z необязательны. |
| полутоновое (х) | Показывает изображение в оттенках серого с максимальным значением 1,0 или 100%. |
| Оттенок поворота (х) | Применяет оттенок-поворот к изображению. |
| инвертировать (х) | Инвертирует цвет изображения с максимальным значением 1,0 или 100%. |
| Непрозрачность (х) | Устанавливает, насколько непрозрачно / прозрачно изображение с максимальным значением 1.0 или 100%. |
| насыщают (х) | Насыщает изображение при любом значении выше 1,0 или 100%. Ниже этого изображения начнет дезатуироваться. |
| сепия (х) | Преобразует изображение в сепию с максимальным значением 1,0 или 100%. |
замечания
Поскольку фильтр является экспериментальной функцией, вы должны использовать префикс -webkit. Он может меняться в синтаксисе и поведении, но изменения, вероятно, будут небольшими.
Он может не поддерживаться в более старых версиях основных браузеров. В мобильных браузерах он может быть полностью неподдерживаемым.
Из-за относительно ограниченной поддержки попытайтесь использовать
box-shadowвместоfilter: drop-shadow(). Используйтеopacityвместоfilter: opacity().Он может быть анимирован через Javascript / jQuery. Для Javascript используйте
object.style.WebkitFilter.Проверьте W3Schools или MDN для получения дополнительной информации.
W3Schools также имеет демонстрационную страницу для всех типов значений фильтра.
Drop Shadow (вместо этого используйте вместо него тень box-shadow)
HTML
<p>My shadow always follows me.</p>
CSS
p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
Результат
Множественные значения фильтра
Чтобы использовать несколько фильтров, отделите каждое значение пробелом.
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}
Результат
Оттенок
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Результат
Инвертировать цвет
HTML
<div></div>
CSS
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
Результат
Переходит от белого к черному.
пятно
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Результат
Заставляет тебя тереть очки.