САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
Внимание!!! Скоро выйдет новая весия УЧЕБНИК JAVASCRIPT
×

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб шрифты CSS Анимации CSS Длины CSS Конвертер px-em CSS Названия цвета CSS Значения цвета CSS по умолчанию CSS Символы

CSS Свойства

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index



СSS Свойство filter


Пример

Измените все изображения на черно-белые (100% серый):

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
Редактор кода »

Определение и использование

Свойство filter определяет визуальные эффекты (например, размытие и насыщенность) для элемента (часто <img>).

Значение по умолчанию: none
Унаследованный: нет
Анимируемый: да Прочитайте о animatable
Версия: CSS3
JavaScript синтаксис: object.style.WebkitFilter="grayscale(100%)" Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit- указывают первую версию, которая работала с префиксом.

Свойство
filter 53.0
18.0 -webkit-
13.0 35.0 9.1
6.0 -webkit-
40.0
15.0 -webkit-

Примечание: Более старые версии Internet Explorer (4.0-8.0) поддерживали нестандартное свойство "filter", которое было объявлено устаревшим. Это было главным образом использовано для opacity, когда нужна поддержка IE8 и ниже.



CSS Синтаксис

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Совет: Чтобы использовать несколько фильтров, отделите каждый фильтр пробелом (см. "Больше примеров" ниже).


Функция фильтра

Примечание: Фильтры, использующие процентные значения (т.е. 75%), также принимают значение как десятичное число (т.е. 0.75).

Фильтр Описание Воспроизвести
none Значение по умолчанию. Указывает отсутствие эффектов Воспроизвести »
blur(px) Применяет эффект размытия к изображению. Большее значение создаст больше размытия.

Если значение не указано, используется 0.
Воспроизвести »
brightness(%) Регулирует яркость изображения.

0% сделает изображение полностью черным.
100% (1) является значением по умолчанию и представляет собой исходное изображение.
Значение над 100% обеспечит более яркие результаты.
Воспроизвести »
contrast(%) Регулирует контрастность изображения.

0% сделает изображение полностью черным.
100% (1) является значением по умолчанию и представляет собой исходное изображение.
Значение над 100% обеспечит результаты с большим контрастом.
Воспроизвести »
drop-shadow(h-shadow v-shadow blur spread color) Применяет эффект тени к изображению.

Возможное значение:
h-shadow - Требуемый. Задает значение пикселя для горизонтальной тени. Отрицательные значения помещают тень слева от изображения.

v-shadow - Требуемый. Задает значение пикселя для вертикальной тени. Отрицательные значения помещают тень над изображением.

blur - Необязательный. Это третье значение, и оно должно быть в пикселях. Добавляет эффект размытия к тени. Большее значение создаст большее размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0 (край тени острый).

spread - Необязательный. Это четвертое значение, и оно должно быть в пикселях. Положительные значения заставят тень расширяться и увеличиваться, а отрицательные сжиматься. Если не указано, то это будет 0 (тень будет иметь тот же размер, что и элемент).
Примечание: Chrome, Safari и Opera, и, возможно, другие браузеры, не поддерживают эту 4-ю длину; она не будет отображаться при добавлении.

color - Необязательный. Добавляет цвет к тени. Если не указано, цвет зависит от браузера (часто черный).

Пример создания красной тени, которая является 8px большой как по горизонтали, так и по вертикали, с эффектом размытия 10px:

filter: drop-shadow(8px 8px 10px red);

Совет: Этот фильтр похож на свойство box-shadow.
Воспроизвести »
grayscale(%) Преобразует изображение в оттенки серого.

0% (0) используется по умолчанию и представляет исходное изображение.
100% сделает изображение полностью серым (используется для черно-белых изображений).

Примечание: Отрицательные значения не допускаются.
Воспроизвести »
hue-rotate(deg) Применяет поворот оттенка к изображению. Значение определяет количество градусов вокруг цветового круга, в котором будут скорректированы образцы изображений. 0deg используется по умолчанию и представляет исходное изображение.

Примечание: Максимальное значение 360deg.
Воспроизвести »
invert(%) Инвертирует образцы в изображении.

0% (0) имеет значение по умолчанию и представляет исходное изображение.
100% сделает изображение полностью перевернутым.

Примечание: Отрицательные значения не допускаются.
Воспроизвести »
opacity(%) Устанавливает уровень непрозрачности для изображения. Уровень непрозрачности описывает уровень прозрачности, где:

0% полностью прозрачный.
100% (1) имеет значение по умолчанию и представляет исходное изображение (без прозрачности).

Примечание: Отрицательные значения не допускаются.
Совет: Этот фильтр похож на свойство opacity.
Воспроизвести »
saturate(%) Насыщает изображение.

0% (0) сделает изображение полностью ненасыщенным.
100% имеет значение по умолчанию и представляет исходное изображение.
Значение более 100% обеспечивает сверхнасыщенные результаты.

Примечание: Отрицательные значения не допускаются.
Воспроизвести »
sepia(%) Преобразует изображение в сепию.

0% (0) имеет значение по умолчанию и представляет исходное изображение.
100% сделает изображение полностью сепия.

Примечание: Отрицательные значения не допускаются.
Воспроизвести »
url() Функция url() принимает расположение xml-файла, который задает фильтр SVG, и может включать привязку к определенному элементу фильтра. Пример:

filter: url(svg-url#element-id)
initial Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial
inherit Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Пример размытия

Применить эффект размытия к изображению:

img {
  -webkit-filter: blur(5px); /* Safari */
  filter: blur(5px);
}
Редактор кода »

Пример размытия 2

Применение размытого фонового изображения:

img.background {
  -webkit-filter: blur(35px); /* Safari */
  filter: blur(35px);
}
Редактор кода »

Пример яркости

Отрегулируйте яркость изображения:

img {
  -webkit-filter: brightness(200%); /* Safari */
  filter: brightness(200%);
}
Редактор кода »

Пример контраста

Отрегулируйте контрастность изображения:

img {
  -webkit-filter: contrast(200%); /* Safari */
  filter: contrast(200%);
}
Редактор кода »

Пример падения тени

Применение эффекта тени к изображению:

img {
  -webkit-filter: drop-shadow(8px 8px 10px gray); /* Safari */
  filter: drop-shadow(8px 8px 10px gray);
}
Редактор кода »

Пример оттенков серого

Преобразование изображения в оттенки серого:

img {
  -webkit-filter: grayscale(50%); /* Safari */
  filter: grayscale(50%);
}
Редактор кода »

Пример поворота оттенка

Применение поворота оттенка на изображении:

img {
  -webkit-filter: hue-rotate(90deg); /* Safari */
  filter: hue-rotate(90deg);
}
Редактор кода »

Пример инвертировать

Инвертировать образцы в изображении:

img {
  -webkit-filter: invert(100%); /* Safari */
  filter: invert(100%);
}
Редактор кода »

Пример непрозрачности

Установите уровень непрозрачности для изображения:

img {
  -webkit-filter: opacity(30%); /* Safari */
  filter: opacity(30%);
}
Редактор кода »

Пример насыщения

Насыщение изображения:

img {
  -webkit-filter: saturate(800%); /* Safari */
  filter: saturate(800%);
}
Редактор кода »

Пример сепии

Преобразование изображения в сепию:

img {
  -webkit-filter: sepia(100%); /* Safari */
  filter: sepia(100%);
}
Редактор кода »

Использование нескольких фильтров

Чтобы использовать несколько фильтров, разделите каждый фильтр пробелом. Обратите внимание, что порядок важен (т.е. использование оттенков grayscale() после того, как sepia() приведет к полностью серому изображению):

img {
  -webkit-filter: contrast(200%) brightness(150%);  /* Safari */
  filter: contrast(200%) brightness(150%);
}
Редактор кода »

Все фильтры

Демонстрация всех функций фильтра:

.blur {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.brightness {
  -webkit-filter: brightness(0.30);
  filter: brightness(0.30);
}

.contrast {
  -webkit-filter: contrast(180%);
  filter: contrast(180%);
}

.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.huerotate {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}

.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.opacity {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
}

.saturate {
  -webkit-filter: saturate(7);
  filter: saturate(7);
}

.sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.shadow {
  -webkit-filter: drop-shadow(8px 8px 10px green);
  filter: drop-shadow(8px 8px 10px green);
}
Редактор кода »

Связанные страницы

CSS Учебник: CSS Изображения

HTML DOM Справочник: Свойство filter