CSS фильтры

Виды фильтров

В качестве примера объекта для демонстрации возможностей фильтров будем использовать изображение.

grayscale (оттенки серого)

Один из самых популярных фильтров, позволяющий работать с оттенками серого и добиваться черно-белого эффекта.

Пример

img { 
  filter: grayscale(100%); 
} 

sepia (сепия)

Добаяляет объекту эффект старой фотографии.

Пример

img { 
  filter: sepia(100%); 
}

blur (размытие)

Добаяляет объекту эффект размытия

Пример

img { 
  filter: blur(1px); 
}

opacity (прозрачность)

Добавляет объекту эффект прозрачности. Работает аналогично css свойству opacity, различия только в синтаксисе.

Пример

img { 
  filter: opacity(50%); 
} 

brightness (яркость)

Позволяет уменьшать и увеличивать яркость объекта.

Пример

mg { 
  filter: brightness(50%); 
} 

i

img { 
  filter: brightness(200%); 
} 

contrast (контраст)

Позволяет уменьшать и увеличивать контрастность объекта.

Пример

img { 
  filter: contrast(50%); 
}

img { 
  filter: contrast(200%); 
} 

saturate (насыщенность)

Позволяет уменьшать и увеличивать насыщенность цветов объекта.

Пример

img { 
  filter: saturate(50%); 
}

img { 
  filter: saturate(200%); 
}

hue-rotate (смещение цвета)

Позволяет смещать цвета объекта по цветовому кругу.

Пример

img { 
  filter: hue-rotate(90deg); 
} 

img { 
  filter: saturate(200%); 
} 

invert (инверсия цвета)

Позволяет инвертировать цвета объекта.

Пример

img { 
  filter: invert(100%); 
} 

Часто возникающие проблемы

Наиболее часто возникающим проблемой при использовании фильтров является: "Я задал блоку фоновое изображение и фильтр, но фильтр применился ко всем элементам, а не только к фону". Все правильно, ведь фильтр как и фон задан для всего блока. Для того чтобы применить фильтр только к изображению его надо вынести в отдельный элемент.

<div class="back_block">
    <div class="slider-main__button">
       <div class="inline-top"></div>
       <div class="inline-top">Кнопка</div>
    </div>
</div>

Как было:

.back_block { 
  background: url(/media/blog/filter_img.jpg); center no-repeat; 
  background-size: cover; 
  filter: grayscale(100%); 
}

Как надо:

.back_block { 
  position: relative; 
} 

.back_block * { 
  position: relative; 
} 

.back_block__img { 
  width 100%; 
  height: 100%; 
  background: url(/media/blog/filter_img.jpg); center no-repeat; 
  background-size: cover; 
  position: absolute; 
  left: 0; 
  top: 0; 
}