Прозоре зображення css. Створення прозорого фону в HTML та CSS (ефекти opacity та RGBA). А де мені взяти ці циферки

Ефект напівпрозорості елемента добре помітний на фоновому малюнку і набув поширення в різних операційні системитому, що виглядає стильно і красиво. У веб-дизайні напівпрозорість також застосовується та досягається за рахунок властивості opacity або формату кольору RGBA, який задається для фону.

Властивість opacity

Основна особливість цієї властивості полягає в тому, що значення прозорості діє на всі дочірні елементи всередині, а не лише на тлі. Це означає, що фон і текст стануть напівпрозорими і збільшити рівень прозорості, додаючи , не вийде. У табл. 1 показаний вигляд тексту та фону з різними значеннями opacity.

У прикладі 1 показано створення напівпрозорого блоку з використанням opacity.

Приклад 1. Фон на веб-сторінці

HTML5 CSS3 IE 9+ Cr Op Sa Fx

opacity

RGBA

Зазвичай по дизайну напівпрозорим має бути лише тло елемента, а текст непрозорим для збереження його читабельності. Властивість opacity тут не підходить, тому що текст усередині елемента також буде частково прозорим. Найкраще використовувати формат RGBA, частиною якого є альфа-канал або іншими словами значення прозорості. Як значення пишеться rgba , потім у дужках через кому перераховуються значення червоної, синьої та зеленої компоненти кольору. Останнім йде прозорість, яка задається від 0 до 1 (рис. 1), при цьому 0 означає повну прозорість, а 1 непрозорість кольору.

Мал. 1. Синтаксис застосування rgba

У прикладі 2 показано застосування формату RGBAдля створення напівпрозорого фону.

Приклад 2. Напівпрозоре тло

HTML5 CSS3 IE 9+ Cr Op Sa Fx

rgba

Гоббс одним із перших висвітлив цю проблему з позицій психології.

Результат цього прикладу показано на рис. 2. Значення непрозорості для фону встановлено на 90%.

Мал. 2. Напівпрозорий фон та непрозорий текст

Досить часто можна знайти в Інтернеті відповідне зображення, наприклад, щоб вставити його на веб-сайт. А можливо, Ви робите колаж і потрібно на один малюнок додати інші. Ось тільки потрібні зображення зазвичай мають фон.

Давайте розберемося, як можна зробити прозоре тло для зображення за допомогою редактораAdobePhotoshop. У мене встановлено англомовна версія Adobe Photoshop CS5, тому показуватиму на ньому.

Постараюсь наводити різні поєднаннягарячі клавіші.

Якщо у Вас ще не встановлений фотошоп, Ви ним дуже рідко користуєтеся або він англійською мовою, можете зробити прозоре тло в Paint.net. Це простий російськомовний редактор зображень, який займе трохи місця на жорсткому диску. Перейшовши на посилання, Ви можете прочитати докладну статтю. Завантажити програму Paint.net можна із нашого сайту.

Спочатку розглянемо простий приклад. Припустимо, у Вас є зображення на однотонному тліЦе може бути логотип або назва чого-небудь. Зробимо цей логотип чи напис на прозорому фоні у фотошоп.

Відкриваємо потрібне зображення у редакторі. Тепер зробимо прозоре тло для шару. У вікні «Шари» клацаємо два рази мишкою по доданому шару – навпроти нього стоятиме замочок. Відкриється вікно "Новий шар", натисніть в ньому "ОК". Після цього замочок зникне.

Вибираємо інструмент "Чарівна паличка". У рядку властивостей вкажіть рівень чутливості, задавайте різні значення, щоб зрозуміти, як він працює, наприклад 20 і 100. Щоб зняти виділення з малюнка, натисніть Ctrl+D.

Задаємо чутливість та натискаємо чарівною паличкою на область фону. Щоб додати до виділеного фону, ті частини, які не виділилися, натисніть Shift і продовжуйте виділення. Щоб видалити виділені області, натисніть «Delete».

Тепер замість фону шахова дошка – це означає, що нам вдалося зробити білий фон прозорим. Знімаємо виділення - "Ctrl + D".

Якщо у Вас зображення або фотографія, на якій багато різних кольорів та об'єктів, розглянемо, як зробити прозоре тло для зображення у фотошопі.

У цьому випадку скористаємося інструментом «Швидке виділення». Клацаємо по чарівній паличці лівою кнопкою миші з невеликою затримкою та вибираємо з меню потрібний інструмент.

Тепер потрібно виділити об'єкт, який хочемо залишити на прозорому тлі. У рядку властивостей встановлюйте різні розміри та клацніть на об'єкт, додаючи до нього області. Якщо помилково виділиться непотрібне тло, натисніть «Alt» і приберіть його.

Щоб переглянути результат, натисніть «Q». Рожевим будуть виділені частини зображення, які стануть прозорими.

Копіюємо виділені області, натиснувши Ctrl+C. Далі створюємо новий файл, Ctrl+N, з прозорим тлом.

Вставляємо в нього скопійовані фрагменти, "Ctrl + V". Якщо на них залишилися непотрібні частини фону, приберіть їх за допомогою інструмента «Ластик». Зберігаємо зроблені на прозорому тлі картинки формат PNGчи GIF.

Робіть біле тло малюнка прозорим, або робіть прозоре тло для окремих фрагментів кольорового зображення чи фотографії у фотошопі. Після цього можна їх використовувати там, де це необхідно: вставляти на сайт, додавати на інший малюнок або робити цікаві колажі.

Прозорість фону CSS

Прозорість фону на сайті створюється через свій CSS. Домогтися прозорості можна двома способами: через властивість opacity і background:rgba(). Давайте розглянемо кожен із них, а далі проведемо порівняння.