Как создать: Добавить эффект изображения

Узнайте, как добавить визуальные эффекты к изображениям.

Изображение фильтры

Попробуйте сами

CSS Фильтры

CSS filter Атрибут добавляет визуальные эффекты к элементам (например, размытие и насыщенность).

Внимание:Microsoft Internet Explorer, Edge 12 или Safari 5.1 и более ранние версии не поддерживают filter Атрибут.

Пример гами

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

Тюльпан
Исходное изображение
Тюльпан
Граничный цвет (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Попробуйте сами

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

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

Тюльпан
Исходное изображение
Тюльпан
Размытие (5 пикселей)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Попробуйте сами

Соответствующие страницы

Руководство:Атрибут CSS filter