Ви хочете навчитися створювати сторінки з оригінальним і яскравим сучасним дизайном? Застосування напівпрозорих елементів здатне допомогти Вам у вирішенні цього непростого завдання. Сьогодні ми розглянемо основні практичні способи завдання прозорості структурних елементів.

Як задати прозорість?

Якщо розглядати дану тему крізь призму історичного розвитку веб-технологій, то можна виділити наступні підходи:

• властивість opacity.
• Використання PNG -картінкі
• формат системи RGBA
• Ну, і нарешті, старовину або картаті зображення.

CSS властивість Opacity

застосування стильового CSSвластивості оpacity дозволяє задати прозорість того елемента, до якого застосовується. Значення, які можна використовувати в якості аргументу змінюються в межах від 0 до 1.
Розглянемо приклад.

< html> < head> < title> TODO supply a title < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > Тут буде багато Вашого тексту

/ * Фон для тіла сторінки * / ). prozrachen (padding: 10px; / * Відступ для тексту * / background: darkturquoise; / * Задаємо колір фону * / margin: 0 auto; / * Центруючи блок * / width: 50%; / * Задаємо ширину блоку * / opacity: 0.7; / * Задаємо прозорість * / font: 48px / 64px Times New Roman; text- align: justify; )

В результаті ми отримали напівпрозорий блок:

Важливо !!!

1. Opacityприймає значення з діапазону: 0 (повна прозорість) - 1 (непрозорість).
2. Кросбраузерну. В IE до сьомої версії включно Opacityне підтримується. Домогтися однакового відображення елемента допоможе наступний рядок:

   filter: alpha (Opacity \u003d 70);

   Варто брати до уваги те, що властивість filterвідсутня в htmlспецифікаціях, змінює значення від 1 до 100 і може застосовуватися тільки до елементів:

   • з абсолютним позиціонуванням ( position: absolute)
   • з фіксованим лінійним розміром ( height або width).
3. Ступінь прозорості успадковується дочірніми елементами, при чому дочірньому елементу можна збільшити прозорість, але зробити менше - не можна. Т. е. На напівпрозорому фоні непрозорими тексту не зробити.

Для кращого розуміння матеріалу останнього пункту, в попередньому прикладі поставимо тексту білий колір

color: white;

і розглянемо його під мікроскопом:

Як бачимо, контент нашого блоку (текст) теж став напівпрозорим. Але що робити, якщо на практиці прозорість вмісту вас не цікавить, а цікавить лише прозорість фону? В такому випадку, переходимо до наступного пункту.

Використання PNG -картінкі

Цікавою особливістю формату PNGє те, що він має 256 рівнів прозорості. Думаю, Ви вловили хід думок, і напевно вже побудували алгоритм роботи такого підходу. Мені залишається тільки його озвучити.

В результаті ми отримали блок з прозорим фоном і непрозорим вмістом:

Важливо !!!

1. На відміну від властивості opacityпрозорість задається тільки для фону
2. Кросбраузерну. Працює майже в усіх браузерах, і це плюс. але прозорість PNGне підтримується в IE6. Якщо ви оптимізуєте свій сайт під таку старовину - доведеться застосовувати інші методи або скрипти.
3. При відключенні відображення картинок, ваш фон пропаде (врахуйте цей момент при оптимізації відображення на мобільних пристроях, адже безлімітний інтернет не завжди є під рукою).
4. Для зміни кольору і / або ступеня прозорості вам потрібно створити нову картинку і перезаліть її на серв.

Формат системи RGBA

Одним з найсучасніших методів зміни Транспарантний фону є застосування системи RGBA.

RGBA- система подання кольору за допомогою трьох стандартних каналів RGB(Червоний, зелений, синій), і четвертого, так званого Alpha-каналу, що характеризує ступінь прозорості.

background: rgba (r, g, b, a);

У вже відомому нам прикладі, замінимо вміст в CSSфайлі на наступне:

body (background: url (./ vaden- pro- logo. png); / * Шпалери * / ). prozrachen (padding: 10px; background: rgba (0, 206, 209, 0.7); margin: 0 auto; width: 50%; font: 48px / 64px Times New Roman; color: white; text- align: justify;)

Важливо !!!

1. На відміну від властивості opacityпрозорість задається тільки фону
2. На відміну від методу PNGкартинки, для зміни кольору або ступеня транспарентності нам потрібно просто поміняти значення rgba.
3. Кросбраузерну. Працює у всіх сучасних браузерах (починаючи з IE9, Op10, Fx3,Sf3.2) .Для більш старих браузерів доведеться або пожертвувати прозорістю, або застосовувати opacity, png методи.

Картаті зображення, або з повагою до історії

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

В результаті застосування такої картинки в якості background отримували псевдо-прозорий фон.

Важливо !!!

1. При перегляді тексту на такому тлі можуть швидко втомлюватися очі (особливо тисне брижі при прокручуванні).
2. В іншому особливості застосування аналогічні з методом «PNG -картінкі».

Підсумуємо?

• Під прозорим блоком повинна знаходитися яскрава не одноманітний картинка. На однотонному тлі родзинка прозорості втрачається.
• При виборі конкретного практичного підходу, орієнтуйтеся на те, якими браузерами користується ваша цільова аудиторія. Кросбраузерну - річ важлива.

На цьому уроці ми з вами розберемо такі CSS властивості - opacity і RGBA. властивість Opacity відповідає тільки за прозорість елементів, а функція RGBA - за колір і прозорість, якщо вказати значення прозорості альфа-каналу.

CSS прозорість Opacity

Цифрове значення для opacity задано в межах від 0.0 до 1.0, де нуль це повна прозорість, а одиниця навпаки - абсолютна непрозорість. Наприклад, для того, щоб побачити 50% прозорості, треба виставити значення в 0.5. Треба мати на увазі, що opacity поширюється на всі дочірні елементи батька. А це означає, що і текст на напівпрозорому фоні, теж буде напівпрозорим. А це вже дуже суттєвий недолік, текст не так добре виділяється.

На скріншоті чітко видно, що чорний текст став таким же напівпрозорим, як і блакитний фон.

Div (
background: url (images / yourimage.jpg); / * Фон картинка * /
width: 750px;
height: 100px;
margin: auto;
}
.blue (
background: # 027ав4; / * Колір напівпрозорого фону * /
opacity: 0.3; / * Значення напівпрозорої фону * /
height: 70px;
}
h1 (
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
}

CSS прозорість в форматі RGBA

Формат для запису кольору RGBA, Є більш сучасною альтернативою для властивості opacity. R (red), G (green), B (blue) - значить: червоний, зелений, синій. Остання буква A - означає альфа-канал, який і задає прозорість. RGBA на відміну від Opacity не впливає на дочірні елементи.

Тепер давайте розглянемо наш приклад з використанням RGBA. Замінимо ці рядки в стилях.

Background: ## 027ав4; /* Колір фону */
opacity: 0.3; / * Значення напівпрозорості фону * /

на наступну один рядок

Background: rgba (2, 127, 212, 0.3);

Як ви бачите значення прозорості 0.3 збігається в обох методів.

Результат прикладу з RGBA:

Другий скріншот набагато краще виглядає, ніж перший.

Граючись із полупрозрачностью фону блоків, можна домогтися на сайті цікавих ефектів. Важливо, щоб ці напівпрозорі блоки йшли поверх строкатого малюнка, наприклад фотографії. Тільки в цьому випадку ефект буде помітний. Цей прийом уже давно застосовувався в дизайні, ще до появи будь-яких CSS3, Реалізовувався він чисто в графічних програмах.

Якщо замовник вимагає, щоб верстка добре виглядала і в старих версіях браузера Internet Explorer, Тоді додавайте властивість filter і не забудьте закомментировать, щоб не постраждала валідність коду.

висновок

формат RGBA підтримують всі сучасні браузери, за винятком Internet Explorer. Ще дуже важливо, що RGBA гнучкий, він діє тільки на конкретний заданий елемент, не зачіпаючи дочірніх. Зрозуміло, що для верстальника це зручніше. Мій вибір однозначно на користь формату RGBA для отримання прозорості в CSS.

Для кращого закріплення матеріалу і більшої наочності, пропоную вам пройти.

З приходом 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 значення (не враховуючи inherit, загального для всіх представлених в цій статті атрибутів):

• 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 досить напісать.3:

.block (background-image: url (img.png); opacity: .3;).

Щоб задати прозорість фону, CSS якого підійде навіть для IE нижче дев'ятої версії, використовуйте атрибут filter:

.block (background-image: url (img.png); filter: alpha (opacity \u003d 30);).

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

Завжди стежте за статистикою використання браузерів по СНД і всім іншим країнам. Найбільша проблема всіх верстальників - старі версії IE, саме вони не дозволяють використовувати в повній мірі CSS3. При верстці не забувайте користуватися спеціальними сервісами, які перевіряють, чи підтримує ваш браузер якесь властивість CSS. Якщо ви не можете встановити старі версії браузерів, знайдіть сервіс, який перевірить роботу сайту в різних браузерах онлайн.

Сьогодні я хочу поговорити про прозорому тлі блоку тексту, як його робити, і що для цього пропонує CSS3. Перед тим, як перейти до rgba і hsla, розглянемо приклади використання напівпрозорого фону для блоку з текстом, а точніше те, як це досягається і які проблеми виникають. Для демонстрації будемо використовувати ось цю картинку, оброблену якоюсь програмою на java, і лінк на яку, на жаль, був давно загублений.

Дивимося на картинку нижче. Є графічний фон, на який потрібно накласти напівпрозорий блок з текстом. В ідеалі має бути те, що на малюнку під цифрою 2, але іноді може виникати то, що під цифрою 3. Є ще один дефект, але про нього згадаю словесно трохи нижче, тому що отскріншотіть його не було можливості.

Напівпрозорий фон без rgba і hsla

1. напівпрозорий PNG . Оптимальний варіант, тому що на сьогоднішній день він самий кросбраузерності і найпростіший. Для того, щоб блок був прозорий, необхідний однопіксельний напівпрозорий PNG, який заданий в якості бекграунду блоку. І все.
   
   недоліки: Тільки один - потрібно.
2. Прозорість через opacity . Прозорість блоку задається кросбраузерності наступним чином:

   opacity: 0.5;
   filter: alpha (opacity \u003d 50);
   -moz-opacity: 0.5;

   де 0,5 і 50 - це 50% прозорості. Але є проблема. Якщо ми поставимо потрібного нам блоку таку напівпрозорість, то ми побачимо той третій варіант на зображенні вище - контент блоку також стане напівпрозорим. Однак вихід є - вільний позиціонування, за допомогою якого під блок тексту кладеться другий блок, якому і задана напівпрозорість ..

   Розглянемо приклад. Нехай блок з помаранчевої картинкою - це тег body, контейнер, в якому буде і текст і прозора підкладка - #block_bg, всередині якого блок з напівпрозорим фоном #block_transparent, а блок з текстом - #block_text.

   
   

   
   

   Текст текст текст, багато-багато тексту

   
   

   body (background: url (image.jpg);)
   #block_bg (
   position: relative;
   overflow: hidden;
   width: 400px;
   padding: 10px;
   }
   #block_text (position: relative; z-index: 100;)
   #block_transparent (
   opacity: 0.5;
   filter: alpha (opacity \u003d 50);
   -moz-opacity: 0.5;
   background: #fff;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 90;
   height: 5000px;
   width: 400px;
   }

   Звертаю увагу, що необхідно ставити ширину прозорого блоку (рядок 19), інакше він згорнеться в 1 піксель, і ширину загального блоку (рядок 5), інакше текст буде виходити за межі прозорого блоку (хоча ширину можна і тексту задати, але принципової різниці не буде). Щоб були відступи від тексту і краю прозорого блоку, використовуємо паддінг в шостому рядку. Щоб прозорість була регульована по висоті, задаємо їй висоту більше (рядок 18) та перекриття для загального блоку (рядок 4).
   Отже, ми запхали все в один блок, який можна пхати в будь-яку частину сторінки, де є цікава підкладка. Так, може виникнути бажання поставити бекграунд загального блоку block_bg, але краще не варто - ускладнити собі життя (в залежності, звичайно, від завдання). Іншими словами, краще всю цю конструкцію запхати в окремий блок, якому задати паддінг і не мучитися.
   недоліки: Занадто громіздко.

rgb і hsl, rgba і hsla - властивості CSS3

Точніше це не зовсім властивості - це нова можливість здавна кольору для таких властивостей як background, color, border і т.д.

Назва властивостей пішли від колірних систем RGB (Red, Green, Blue) і від HSL (Hue, Satutation, Lightness). Перша система описує колірний простір за допомогою змішування основних кольорів - червоного, зеленого і синього. У другій системі компоненти кольору відображають інформацію про колір в більш звичній для людини формі: Що це за колір? Наскільки він насичений? Наскільки він світлий або темний?

rgb і rgba

Почнемо з rgb і rgba. Значення r, g, b можуть задаватися від 0 до 255 або від 0% до 100%. Значення a (alpha, прозорість) вимірюється від 0 до 1 (дробові значення задаються через точку - 0.4, 0.7 і т.д.). Якщо для r, g і b будуть задаватися значення, що перевищують їх допустимий діапазон (наприклад, 300 або 110% або -5), то вони скоротяться до найближчого допустимого значення.

Розглянемо все на прикладі властивості background (хоча бажаючі можуть взяти color або border).

background: rgb (0, 0, 255); / * Чисто синій колір * /
background: rgb (100%, 50%, 0%); / * Чисто синій колір * /
background: rgb (10, 145, 500); / * Буде розпізнано як 10, 145, 255 * /
background: rgba (10, 145, 255, 1); / * Те ж саме, що і попереднє * /
background: rgba (100, 50, 255, 0.1); / * Дуже прозорий відтінок бузкового * /

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

hsl і hsla

І кілька слів про hsl і hsla. Значення a задається також, як і у rgb і rgba, а з першими трьома параметрами справа йде трохи по іншому. h задається від 0 до 360, а s і l - від 0% до 100%.

І найголовніше. Якщо в rgb визначити колір з голови дуже складно (майже завжди необхідна стороння програма з "піпеткою"), то тут досить мати одну картинку перед очима, щоб все стало на свої місця. Картинка показує відтінки параметра h.

Щоб прикинути необхідний колір, вибираємо відтінок, потім прикидаємо s, насиченість кольору (де 0% - це ненасичений колір (відтінок сірого), а 100% - сама насиченість) і його світлин (0% - при ньому колір завжди буде чорний, а при 100% - білий). Виходячи з вищесказаного, на зображенні показані світлові тони при насиченості 100% і світлин 50%.

Тепер все колірне простір в голові як на долоні. Звичайно ручної підбір не замінює піпетку, та й не всім потрібно в голові мати "колірний простір", але іноді, щоб швидко прикинути що треба і потестить - воно підходить.

І буквально кілька прикладів

background: hsl (180, 100%, 50%); / * Насичений блакитний колір * /
background: hsla (140, 50%, 30%, 0.5); / * Напівпрозорий, ледь помітно, що відтінок зеленого * /

недоліки: Все 4 властивості не підтримуються віслюком і старими браузерами.

завершення

Загалом, CSS3 дає чергові дуже корисні речі, але як завжди, IE - основне гальмо прогресу. Для сайтів клієнтів я б поки утримався від використання (ще мозок даремно будуть виносити) і брав би варіант з PNG. А на своєму сайті - чому б і ні. Особливо, якщо його відвідують просунуті люди, які не сидять на віслюках або будь-яких осколках давнини.

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

Давайте розберемося, як можна зробити прозорий фон для картинки з допомогою редактораAdobePhotoshop. У мене встановлена \u200b\u200bангломовна версія 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 (). Давайте розглянемо кожен з них, а далі проведемо порівняння.

1. Властивість CSS opacity для прозорості фону

В CSS є властивість opacity за допомогою якого можна задавати прозорість зображень, текстів, в тому числі і фонів.

Завдання прозорості задається просто зазначенням дійсного числа від 0.0 до 1.0. Чим менше число, тим менш помітний буде об'єкт.

opacity: 0.5; // Полупрозрачностьopacity: 0.2; // Об'єкт видно тільки на 20% opacity: 0.8; // Об'єкт видно тільки на 80%

Давайте розглянемо приклад з властивістю opacity.

Текст також прозорий