Створення прозорого фону в HTML та CSS (ефекти opacity та RGBA)
Ефект напівпрозоростіелемента добре помітний на фоновий малюнокі набув поширення в різних операційні системитому, що виглядає стильно і красиво. Головне мати під напівпрозорими блоками не однотонний малюнок, а зображення, саме в цьому випадку прозорість стає помітною.
Такий ефект досягається різними способами, включаючи старомодні методи, як використання малюнка PNG як тло, створення картатого зображення та властивість opacity. Але як тільки виникає необхідність зробити в блоці напівпрозоре тло, у цих методів виявляються неприємні оборотні сторони.
Розглянемо напівпрозорість тексту та фону – як правильно її використовувати в дизайні сайту:
Основна особливість цієї властивості полягає в тому, що значення прозорості діє на все дочірні елементивсередині, а не лише на тлі. Це означає, що фон і текст стануть напівпрозорими. Збільшити прозорість можна змінюючи команду opacity від 0.1 до 1.
HTML 5 CSS 3 IE 9
У веб-дизайні часткова прозорість також застосовується та досягається за рахунок формату кольору RGBA, який задається лише для фону елемента.
Зазвичай у дизайні напівпрозорим має бути лише тло елемента, а текст непрозорим для збереження його читабельності. Властивість opacity тут не підходить, тому що текст усередині елемента також буде частково прозорим. Найкраще використовувати формат RGBA, частиною якого є альфа-канал або іншими словами значення прозорості. Як значення пишеться rgba, потім у дужках через кому перераховуються значення червоної, синьої та зеленої компоненти кольору. Останнім йде прозорість, яка задається від 0 до 1, при цьому означає 0 повну прозорість, а 1 непрозорість кольору - синтаксис застосування rgba.
Напівпрозоре тло HTML 5 CSS 3 IE 9
Значення непрозорості для фону встановлено на 90% - напівпрозорий фон та непрозорий текст.
За замовчуванням нові шари у фотошопі створюються зі 100% непрозорістю. Але ступінь прозорості шару можна змінити за допомогою налаштувань Непрозорістьі Заливання, розташовані у верхній частині панелі шарів.
Непрозорість(Opacity) - це налаштування зі 100% шкалою, що дозволяє змінювати ступінь просвічування всього шару, з усіма накладеними ефектами. Якщо значення буде від 100%, то буде видно нижчий шар. Ступінь прозорості дорівнює 0% говорить про повну відсутність видимих зображень.
Прозорість шару можна порівняти з калькою, яку накладають на малюнки, щоб їх змалювати.
Заливання(Fill) - це налаштування зі 100% шкалою, що дозволяє змінювати видимість шару, не торкаючись накладених на нього.
Як у фотошопі виглядає прозорість
За логікою речей, прозорість цифрового зображення- Це відсутність насиченості та щільності кольору. Якщо уявити колір як плівку, то прозорість це інтенсивність просвічування світла крізь неї. Але як у комп'ютері показати просвічування?
Фотошоп запровадив умовне позначення прозорості для світу комп'ютерної графіки — шахове тло.
Тепер це умовне позначення стало стандартом. Багато програм і веб-сервісів використовують шахове тло, коли мова йдепро прозорість. Наприклад, Яндекс.Малюнки або Google-картинки показують зображення із прозорими елементами на шаховому тлі.
3 способи зробити шар з картинкою прозорим
Для початку необхідний шар потрібно. Тут також буде доречний прийом виділення двох і більше за допомогою клавіш Ctrl або Shift.
Примітка
Фоновий шар (з іконкою замку) не може бути прозорим. Для нього ці опції неактивні.
Ще одна примітка
Мініатюра шару не змінюватиметься, яке б значення прозорості ви не зробили.
Спосіб 1 Введення цифр
Введіть цифрами від 0 до 100 значення необхідної прозорості у спеціальне вікно настройок на панелі. Оскільки в обох налаштувань практично однаковий ефект, ви можете використовувати будь-яку з них, головне пам'ятайте, у чому їх.
Спосіб 2 Повзунковий регулятор
Трохи правіше від цифр є кнопка із маленькою стрілочкою. Якщо натиснути на неї, з'явиться повзунковий регулятор. Його потрібно рухати мишею ліворуч або праворуч, щоб зменшити або збільшити прозорість шару відповідно.
На дисплеї з цифрами відображатиметься поточне значення, а саме зображення змінюватиметься разом із рухом вашої руки.
Спосіб 3 За допомогою клавіатури
Для ряду інструментів фотошопу можна змінити непрозорість шару за допомогою клавіатури. Виберіть інструмент, наприклад, або (також є ряд інших інструментів, їх можна знайти методом перебору).
Тепер натискайте на клавіатурі цифри:
- Цифра 1 змінить непрозорість до 10%, 2 – до 20%, 5 – до 50% тощо;
- Цифра означає 0 100%;
- Наберіть 55 і отримайте 55%, 67 - це 67% і таке інше
Щоб використовувати цей прийом для зміни Заливання, утримуйте клавішу Shift разом із цифрами .
Як зробити прозорим окрему ділянку шару
Щоб зробити прозорим не весь шар, а лише його окрему ділянку, знадобляться деякі зусилля. Як такого інструменту цієї мети немає. Проте, залежно від завдання, є як мінімум два рішення.
Обидва рішення об'єднує початкова, мабуть, трудомістка робота — створення виділеної області. Логіка дій проста - потрібно виділити фрагмент зображення, з яким і проходитиме подальша робота.
У своєму прикладі, припустимо, потрібно зробити прозорим круглий сірий фон. Для цього я скористаюся інструментом. На панелі параметрів потрібно встановити параметр Додати до виділеної області, а потім клацати по всіх потрібних ділянках, поки не виділіть їх усі.
Після того, як з'явилася виділена область, цей фрагмент можна зробити прозорим.
Спосіб 1 Вирізати потрібну ділянку зображення на новий шар
Спершу потрібно простежити, щоб був активний будь-який із інструментів зі створення виділеної області. Наприклад Чарівна паличка, Якою користувалися на попередньому кроці
Тепер можна натиснути правою кнопкоюмиші виділення. З'явиться контекстне меню. Нас цікавить команда Вирізати на новий шар.
В результаті, цей фрагмент буде відокремлений від поточної картинки і переміщений на новий шар. А далі з тим новим шаром можна робити що хочете, навіть змінювати прозорість.
Спосіб 2 Використання гумки
Цей спосіб підійде, якщо потрібно досягти не рівномірного зниження прозорості, а плаваючого, тобто десь сильніше, а десь слабше зробити цей ефект.
Виберіть , на панелі параметрів установіть значення Непрозорістьвідмінне від 100%. Потім стирайте ділянки зображення, що знаходяться у виділеній області. Вплив інструменту буде лише до пікселів, що ви виділили.
Змінюйте значення Непрозорістьякщо потрібно досягти нерівномірного ефекту.
Як зберегти зображення з прозорістю
Існує безліч, але тільки два з них підтримують прозорість – PNG та GIF.
GIF має обмеження — піксель має бути або прозорим, або ні, третього не дано, тобто значення прозорості, наприклад, 59% вже не підтримуватиметься. Також цей формат має обмеження за кількістю використовуваних кольорів — їх може бути не більше 256.
Тому зображення потрібно зберігати у форматі PNG. Тільки він позбавлений всіх недоліків і здатний показувати напівпрозорі пікселі.
Щоб у фотошопі зображення у форматі PNG потрібно виконати команду: Файл — Зберегти як. З'явиться діалогове вікно, в якому потрібно вказати місце для збереження на комп'ютері, а також вибрати зі списку Тип файлу — PNG(*.PNG).
Помітили помилку в тексті - виділіть її та натисніть Ctrl+Enter. Дякую!
Привіт шановні відвідувачі.У цьому уроці я покажу, як використовуючи програму Фотошоп можна прибрати фоні зробити фотографію прозорою. Особливих знань цього Фотомонстра вам не знадобиться, тому що тут все дуже просто. Головне, щоб у вас був встановлений Photoshop і ви повторювали за мною всі дії.
Отже, як зробити прозоре тло у Фотошопі?
Запускаємо Фотошоп та відкриваємо піддослідну фотографію. Тиснемо меню Файл – Відкрити та вказуємо розташування зображення.
Відмінно, фотографія відкрита і давайте приступати до обрізки тла. Насамперед нам потрібно розблокувати шар. Зверніть увагу на правий нижній кут програми. Там ви побачите головний шар нашої фотки та маленький замочок.
Потрібно, щоби цей замочок зник, тобто шар розблокувався. Для цього прямо по замочку робимо один клік лівою кнопкою миші. І замочка більше нема!
Тепер нам потрібно видалити тло. Для цього беремо якийсь інструмент виділення, наприклад, Чарівна паличка.
Тиснемо інструментом по фону на фотографії, таким чином виділивши непотрібний нам об'єкт.
З'явилася пунктирна лінія(Мурахи, що бігають). Залишається натиснути клавішу DELETE на клавіатурі і фон буде видалено. Дивіться як вийшло:
Супер! Тепер зніміть виділення, натиснувши на клавіатурі клавіші CTR+D .
Ну, загалом, як зробити прозорий фон у Фотошопіми розібралися і тепер цю фотографію залишається правильно зберегти.
Для цього натисніть меню Файл Зберегти для Web . Або ж просто скористайтесь ALT+SHIFT+CTR+S.
Ви побачите вікно, в якому нам потрібно вибрати формат PNG-24 і тільки після цього натискати кнопку Зберегти .
А тепер дивіться, що було і що стало:
Насамкінець варто сказати, що в деяких випадках коли Ви вирішите зробити прозоре тло у Фотошопі на якійсь картинці, то Вам можливо доведеться застосовувати інші інструменти виділення, наприклад, Перо або Магнітне ласо. Я використав інструмент Чарівна паличкаТак як у мене на фотографії людини було легко відокремити від фону. Якщо ви видалятимете фон зі складних зображень, то доведеться трохи попітніти.
На цьому сьогодні все, бажаю удачі!
З приходом CSS3 робота верстальників багато в чому стала простішою і логічною: адже тепер можна дійсно гнучко налаштувати будь-який об'єкт, все рідше вдаючись до JavaScript. Допустимо, вам потрібно налаштувати прозорість фону - CSS відразу пропонує кілька варіантів.
Фон задається набором атрибутів, background-repeat, background-attachment, background-origin, background-clip, background-color), причому кожен з них можна прописати окремо або об'єднати під атрибутом background. Розберемо кожен із них докладніше.
Атрибут background-color
Такий спосіб підтримує навіть IE8. Декілька зображень як фон використовуються при гумовій верстці. Головне, не забувайте при використанні будь-якого зображення також задавати в CSS колірфону, так як у користувачів може просто не завантажитись картинка.
Атрибут background-position
Якщо ви використовуєте зображення, щоб встановити фон блоку, CSS дозволить вам розмістити картинку в будь-якому місці екрану. За замовчуванням зображення знаходиться у верхньому лівому куті. Атрибут приймає або словесні вказівки (top, bottom, left, right), або чисельні (відсотки, пікселі та інші одиниці виміру). При цьому необхідно вказати два значення: по горизонталі та по вертикалі:
body (background-position: right center;) - у цьому прикладі фон буде розташовуватися в правій частині сторінки, причому знизу та зверху відстані до зображення однакові.
Атрибут background-size
Іноді потрібно з допомогою CSSрозтягнути фон або зменшити його розмір. Для цього використовують атрибут background-size, причому розмір фону можна встановити як у пікселях або відсотках, так і в будь-яких інших одиницях вимірювання.
Із цим атрибутом є деякі проблеми: для коректного відображення фону в ранніх версіях браузерів необхідно використовувати префікси. Звичайно, актуальні версіїповністю підтримують цей атрибут і потреба у специфічних властивостях відпала.
Атрибут background-attachment
Цей атрибут задає поведінку фонового зображенняпри прокручуванні. Так, він може приймати 3 значення (не враховуючи вherit, загального для всіх представлених у цій статті атрибутів):
- fixed- робить картинку на тлі нерухомої;
- scroll- фон прокручується разом з іншими елементами;
- local— зображення на фоні прокручується, якщо прокручування має вміст. Фон, який виходить за межі вмісту, фіксується.
Приклад використання:
body (background-attachment fixed).
В даний час Firefox не підтримує останню властивість (local).
Атрибут background-origin
Цей атрибут відповідає за розташування елемента. Браузери ранніх версійвимагають використання префіксів. Сама властивість має три параметри:
- padding-boxпозиціонує фон щодо краю, враховуючи при цьому товщину рамки;
- border-boxвідрізняється від попереднього властивості тим, що лінія кордону може повністю або частково перекривати фон;
- content-boxпозиціонує зображення, прив'язуючи його до контенту.
Якщо задано кілька значень, браузери можуть реагувати по-своєму: Firefox і Opera сприймають лише перший варіант.
Атрибут background-repeat
Як правило, якщо фон заданий зображенням, він повинен повторюватися по горизонталі або по вертикалі. Для цього використовується атрибут background-repeat. Так, фон блоку, CSS якого містить таку властивість, може мати один із кількох параметрів:
- no-repeat- Зображення з'являється на сторінці в єдиному варіанті;
- repeat- Фон повторюється по осях x і y;
- repeat-x- Тільки по горизонталі;
- repeat-y- Тільки по вертикалі;
- space— фон повторюється, але якщо простір заповнити не виходить, між картинками з'являються порожнечі;
- round— зображення масштабується, якщо всю область не заповнено цілими картинками.
Приклад використання атрибуту:
body (background-repeat: no-repeat repeat)- аналогічно background-repeat: repeat-y.
У CSS3 можна встановити значення для декількох зображень, якщо перераховувати параметри через кому.
Атрибут background-clip
Цей атрибут визначає поведінку фону під межами (наприклад, у разі пунктирних рамок):
- padding-box- тло відображається строго всередині блоку;
- border-box- Зображення заходить під рамки;
- content-box- Картинка на тлі з'являється тільки всередині вмісту.
Приклад використання:
body (background-clip: content-box;).
Chrom та Safari вимагають використання префікса -webkit-.
Атрибути opacity та filter
Атрибут opacity дозволяє встановити прозорість фону — CSS властивість буде працювати у всіх браузерах. Значення встановлюється від 0.0 до 1.0 включно. При цьому ви можете встановити прозорість фону CSS без цілого значення: замість 0.3 достатньо написати.
.block (background-image: url(img.png); opacity: .3;).
Щоб встановити прозорість фону, CSS якого підійде навіть для IE нижче дев'ятої версії, використовуйте атрибут filter:
.block (background-image: url(img.png); filter: alpha(opacity=30);).
У цьому випадку значення opacity встановлюється в межах від 0 до 100. Врахуйте, що атрибут opacity відрізняється від налаштування прозорості за допомогою RGBA спадковістю: при використанні opacity прозорим стає не тільки фон, а й усі елементи всередині блоку.
Завжди слідкуйте за статистикою використання браузерів по СНД та решті країн. Найбільша проблема всіх верстальників - старі версії IE, вони не дозволяють використовувати повною мірою CSS3. При верстці не забувайте користуватися спеціальними сервісами, які перевіряють, чи ваш браузер підтримує будь-яку властивість CSS. Якщо ви не можете встановити старі версії браузерів, знайдіть сервіс, який перевірить роботу сайту різних браузерахонлайн.
Прозорість у Photoshop- Одне з ключових понять. Якщо ви тільки почали вивчати фотошоп і ще не знаєте, як зробити прозорим фон фотографії або як зробити частину малюнка прозорою, цей невеликий урок з ілюстраціями буде корисним для вас.
Як зробити прозорий фон у Фотошопі.
Для того, щоб зробити прозоре тло на фото або малюнку, достатньо створити два шари: нижній прозорий фоновий шар і верхній видимий шар, на якому видалити непотрібні ділянки зображення.
1. Відкриваємо Photoshop. Відкриваємо в ньому картинку, яку потрібно розмістити на прозорому тлі. File->Open…).
2. Виділяємо все зображення/фото ( Ctrl+O).
3. Копіюємо виділену картинку ( Ctrl+C).
4. Відкриваємо новий файл у Фотошопі ( File->New…або Ctrl+N). У вікні в самому нижньому випадаючому списку вибираємо значення Transparent– «прозорість»:
Натискаємо Enterі бачимо, що Photoshopстворив новий файл із тлом, що складається з біло-сірих квадратиків. Такими квадратиками у Фотошопі позначаються повністю прозорі області.
5. Вставляємо в новий файл із прозорим фоном раніше скопійоване зображення. Для цього використовуємо традиційну Ctrl+V. У результаті поточний, повністю порожній і прозорий шар буде вставлено раніше скопійоване зображення.
6. Виділіть область, яку потрібно видалити за допомогою звичайних інструментів виділення ( М)
або за допомогою «чарівних» інструментів ( W):
Натисніть клавішу на клавіатурі Deleteі замість виділеного фону або фрагмента зображення побачите біло-сірі квадратики – ця область буде прозорою. Далі можете зберегти зображення з прозорістю або продовжувати експерименти з картинкою у Фотошопі.
Як зробити напівпрозорий текст та «водяний знак»
У Фотошопі, крім стану « повністю бачимо» та « повністю прозорий» існує стан часткової видимостіабо часткової прозорості. Часткова видимість об'єкта малюнку вказується у відсотках.
Напівпрозорий текст, логотип або інші напівпрозорі позначки поверх оригінальних зображень часто використовують для захисту авторських прав. Наносяться вони, як правило, за допомогою фотошопу або спеціальних плагінів. Їхня мета – вказати першоджерело зображення, вказати авторство, ускладнити життя тим людям, які захочуть поцупити картинку.
Припустимо, нам потрібно викласти на сайті компанії ексклюзивне фото автомобіля, вказавши поверх фотографії напівпрозорий напис. Робиться така напівпрозорість у Фотошопі дуже легко:
1. Запускаємо Фотошоп і відкриваємо в ньому нашу фотографію ( File->Open…).
2. Вибираємо інструмент Текст ( T) і пишемо поверх фото напис потрібного розміру, кольори та стилю:
При цьому текст буде автоматично розміщено в окремому шарі та бути 100% видимим.
3. Встановимо 40% видимість білого напису на фото. Для цього у вікні шарів ( Layers) пересунем повзунок властивості Opacityзначення 40%:
Всі. Тепер картинку з напівпрозорим написом можна зберігати в формат JPGта викладати на сайт. Аналогічно замість тексту можна вставити будь-який інший малюнок, наприклад логотип BMW або сайту.
В якому форматі зберегти картинку з прозорістю
Зверніть увагу, що зберігати оброблену у Фотошопі фотографію з прозорими ділянками форматі JPEGне можна – цей формат не підтримує прозорість. Прозорі ділянки при збереженні JPG автоматично будуть заповнені кольором (за замовчуванням — білим). Серед , коректно відображаються браузерами та підтримують прозорість – лише GIF та PNG. Рідний формат Фотошопу PSD браузерами не відображається.
На жаль, графічні формати GIF та PNG мають свої обмеження. Формат GIF, як і 8-біт PNG, може запам'ятати максимум 256 кольорів, тому для збереження фотографій він не підходить. Незважаючи на те, що 24-бітний PNG підходить для зберігання фотографій та іншої графіки з градієнтами та прозорістю, багато сайтів ставлять обмеження на формати завантажуваної відвідувачами графіки. Тому свої фото чи аватари можна завантажити на такі сайти лише у форматі JPG чи GIF. У цьому випадку фотографію доведеться зберігати не на прозорому фоні, а вставляти у Фотошопі той фон, на якому вона буде розміщуватися на сайті, зберігати результати роботи в JPG і вже потім заливати на сайт.