Затемнення картинки через CSS стилі

Затемнення картинки

12687

Зміст:

Затемнення картинки
CSS3-фільтри

Затемнення картинки

Найпростіший зробити затемнення картинки як показано на прикладі з використанням затінення фону background-color

Приклад:

Також затемнення фото можна реалізувати через фільтри CSS

CSS3-фільтри

CSS3-фільтри відтворюють візуальні ефекти в браузері, схожі на фільтри Photoshop. Фільтри можна додавати не лише до зображень, але й до будь-яких непустих елементів.

Сучасні браузери обробляють веб-сторінку попіксельно, при цьому застосовують зазначені ефекти і малюють результат поверх оригіналу фото. Таким чином, застосовуючи деяку кількість фільтрів можна досягати різних результатів, вони ніби накладаються один на одного.

Підтримка браузерами

IE: не підтримує
Edge: 13.0 крім url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

Визначення функцій

blur() Значення визначається в одиницях довжини, наприклад px, em. Застосовує розмиття по Гаусс до вихідного зображення. Чим більше значення радіусу, тим більше розмиття. Якщо значення радіусу не встановлено, за замовчуванням береться 0.
brightness() Значення визначається в % або в десяткових дробах. Змінює яскравість зображення. Чим більше значення, тим яскравіше зображення. Значення за замовчуванням 1.
contrast() Значення визначається в % або в десяткових дробах. Регулює контрастність зображення, тобто. різницю між найтемнішими і найсвітлішими ділянками зображення/фону. Значення за промовчанням 100%. Нульове значення приховує вихідне зображення під темно-сірим тлом. Значення, що збільшуються від 0 до 100% або від 0 до 1, поступово відкриватимуть вихідне зображення до оригінального відображення, а значення збільшуватимуть контраст між світлими і темними ділянками.
drop-shadow() Фільтр діє аналогічно властивостям box-shadow та text-shadow. Використовує наступні значення: зсув по осі Х зсув по осі Y розмитість розтягування колір тіні. Відмінна специфіка фільтра у тому, що тінь додається до елементів та його вмісту з урахуванням їхньої прозорості, тобто. якщо елемент містить текст усередині, то фільтр додасть тінь одночасно для тексту та видимих меж блоку. На відміну від інших фільтрів, для цього фільтра обов'язкове завдання параметрів (мінімальне величина зсуву).
grayscale() Витягує всі кольори з зображення, роблячи на виході чорно-біле зображення. Значення визначається в % або десяткових дробах. Чим більше значення, тим сильніший ефект.
hue-rotate() Змінює колір зображення залежно від заданого кута повороту в колірному колі. Значення визначається в градусах від 0deg до 360deg. 0deg — значення за промовчанням означає відсутність ефекту.
invert() Фільтр робить негатив зображення. Значення визначається в %. 0% не застосовує фільтр, 100% повністю перетворює кольори.
opacity() Фільтр працює аналогічно до властивості opacity, додаючи прозорість елементу. Відмінна риса - браузери забезпечують апаратне прискорення для фільтра, що дозволяє підвищити продуктивність. Додатковий бонус – фільтр можна одночасно поєднувати з іншими фільтрами, створюючи при цьому цікаві ефекти. Значення задається лише у %, 0% робить елемент повністю прозорим, а 100% не має жодного ефекту.
saturate() Керує насиченістю кольорів, працюючи за принципом контрастного фільтра. Значення 0% прибирає кольоровість, а 100% не має жодного ефекту. Значення від 0% до 100% зменшують насиченість кольору, вище 100% збільшують насиченість кольору. Значення може задаватися як %, так і цілим числом, 1 еквівалентно 100%.
sepia() Ефект, що імітує старовину та «ретро». Значення 0% не змінює вигляд елемента, а 100% повністю відтворює ефект сепії.
url() Функція приймає розташування зовнішнього файлу XML з svg-фільтром, або якір до фільтра, що знаходиться в поточному документі.
none Значення за замовчуванням. Чи означає відсутність ефекту.
initial Встановлює цю властивість значення за замовчуванням.
inherit Наслідує значення якості від батьківського елемента.