ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

CSS Reference

CSS Reference CSS Browser Support CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Entities

CSS Properties

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 object-fit 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 z-index




CSS filter Свойство


Пример

Измените все изображения на Черное и белое (100% серого):

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Совет: Подробнее примеры ниже.


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

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

Значение по умолчанию: none
Inherited: no
Animatable: yes. Читайте о animatable
Version: 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", которое устарело. В основном это было использовано для не прозрачности при необходимости поддержки от IE8 и Down.



Синтаксис CSS

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

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


Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

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

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

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

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

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

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

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

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

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

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

фильтр: Drop-Тень (8px 8px 10px красный);

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

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

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

Примечание: Максимальное значение — 360дег.
invert(%) Инвертирование образцов в изображении.

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

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

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

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

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

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

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

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

фильтр: 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%);
}

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

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

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 Свойство