На цьому уроці ми з вами розберемо такі 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.

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

Властивість CSS opacityвідповідає за прозорість елементів (картинки, тексту, блоки) у html.

Синтаксис CSS opacity

Де value може набувати речових значень в діапазоні від 0.0 до 1.0. Значення 1.0 означає, що прозорість відсутня (за замовчуванням).

Приклад №1. Прозоре зображення у html

Перша картинка виведена без прозорості, друга з прозорістю 0.5

Напівпрозорість елемента

Робимо зображення напівпрозорим при наведенні!

ДемонстраціяСкачати вихідні

Дякую за увагу!

Наступна стаття
Як створити div блок з прокручуванням?

CSS прозорість - крос-браузерне рішення - 3.8 out of 5 based on 6 votes

У цьому уроці ми розглянемо CSS прозорість, дізнаємося як надати різним елементам сторінки прозорість і досягти повної крос-браузерності, тобто однакової роботи цього ефекту в різних браузерах.

Як задати прозорість будь-якого елемента

У CSS3 за створення прозорих елементів відповідає властивість opacity, яку можна застосовувати до будь-яких елементів. У цієї властивості є значення від 0 до 1, які визначають ступінь прозорості. Де 0 - це повна прозорість (значення за умовчанням для всіх елементів), а 1 повна непрозорість. Записуються значення дробами: 0.1, 0.2, 0.3 тощо.

Приклад використання:

Крос-браузерність прозорості

Не всі браузери однаково сприймають та реалізують зазначену вище властивість opacity. У деяких випадках необхідно використовувати іншу назву властивості або фільтри.

Властивість CSS3 opacity підтримують такі види браузерів Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Такий хороший:) браузер як Internet Explorer до версії 9,0 не підтримує властивість opacity і для створення прозорості для цього браузера потрібно використовувати властивість filter і значення alpha(Opacity=X), в якому Х - це ціле число в діапазоні від 0 до 100, за допомогою якого визначається рівень прозорості. 0 – це повна прозорість, а 100 – повна непрозорість.

Що стосується браузера Firefoxдо версії 3.5 він підтримує властивість -moz-opacity замість opacity.

Такі браузери як Safari 1.1 і Konqueror 3.1, побудовані на движку KHTML, використовують для керування прозорістю якість: -khtml-opacity.

Як же задати CSS прозорість, щоб це виглядало у всіх браузерах однаково? Для створення крос-браузерного рішення для прозорості елементів їм потрібно прописувати не тільки одну властивість opacity, а наступний набір властивостей:

filter: alpha (Opacity = 50); /* Прозорість для IE */ -moz-opacity: 0.5; /* Підтримка Mozilla 3.5 та нижче */ -khtml-opacity: 0.5; /* Підтримка Konqueror 3.1 та Safari 1.1 */ opacity: 0.5; /* Підтримка решти браузерів */

Прозорість різних елементів

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

CSS прозорість зображення.

Розглянемо кілька варіантів створення напівпрозорої картинки. У наступному прикладі першої картинки не задана прозорість, друга має прозорість 50%, третя 30%.

Результат:

Прозорість на CSS під час наведення курсору на картинку.

Часто потрібно зробити прозорим зображенняабо будь-який інший елемент у той момент, коли на нього наведено курсор. Зробити це можна за допомоги CSSпсевдокласу: hover. Для цього нашій картинці потрібно прописати два класи один звичайний - це буде неактивний стан картинки та другий клас із псевдокласом: hover, тут необхідно вказати прозорість картинки в момент наведення курсору.

Результат можете подивитися у демо.

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

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

Як приклад наведемо варіант з фоном сторінки створеним за допомогою картинки і блоком з фоном створеним за допомогою кольору і прозорістю 50%.

Приклад коду:

Текст

Ось результат розміщеного вище коду:

orem Ipsum is simply dummy text printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Вона була популярна в 1960 році з редакцією Letraset sheets containing Lorem Ipsum passages, і багато останніх з робочим програмним забезпеченням як Aldus PageMaker including versions of Lorem Ipsum.
Це є тривалий факт, що reader буде роз'яснений readable content of page when looking at its layout. Доказом використання Lorem Ipsum є те, що він має більш-менш загальну розподільну плату, як можна використовувати "Додаток тут, content here", making it look like readable English. Багато робочих пакетів і веб-сторінок веб-сторінок в даний час використовує Lorem Ipsum як їхній дефектний текстовий текст, і search for "lorem ipsum" буде завантажувати багато веб-сайтів, що знаходяться в їхній дитині. Різні версії мають evolved over years, sometimes by accident, sometimes on purpose (injected humour and the like).

Отже, сьогодні мова піде про прозорості у htmlсторінок. Ви напевно стикалися з прозорими спливаючими блоками, будь то фотогалерея або форми авторизації на якомусь популярному сайті. Застосування прозорості в html можна знайти безліч. То як вона робиться і де її можна використовувати?

Ну для початку усвідомимо, що документ у нас має не тільки одну площину монітора - він взагалі кажучи 3х мірний, про це я згадував у статті "Z-index". Відповідно навіть зовсім прозорий шар, опинись він на верху стека відображення, перекриє доступ до інших елементів. У цьому вся одне з основних застосувань прозорих блоків. Незважаючи на те, що зазвичай використовується ефект затінення, повністю прозорий шар працюватиме так само. Так, наприклад, працює дуже багато популярних фото-галерей, організується затінений шар у якому відображаються фото, та елементи керування ними. Все інше місце сторінки виявляється "накрито" (напів)прозорим шаром, що закриває доступ до всіх інших елементів на сторінці. Тобто. піти зі сторінки, натиснувши на ній якесь посилання не вийде - весь текст закритий підкладкою. Щоб повернутися до тіла сайту, зазвичай передбачають елементи управління для закриття галереї, форми входу тощо. Керують показом/прихованням прозорих блоків з допомогою javascript. Тут, на жаль, альтернативи йому немає. Без використання користувач або взагалі не побачить прозорого блоку, або не зможе його закрити, не пішовши з поточної сторінки. Зазначу, що використовуються для цієї властивості visibility або display.

Так як, що організується прозорість в html? Налаштування прозорості елементів взагалі не входить до специфікації CSS, тому доводиться використовувати відразу кілька інструкцій для її створення. Одні браузери (ie) працюватимуть з одним варіантом, другі з іншим. Ie використовує вбудовану функціональність filter, інші браузери використовують властивість "opacity", яка задається в інтервалі від 0(повністю прозорий об'єкт) до 1(повна непрозорість). Наприклад у випадку з 30% прозорістю слід писати " opacity:0.30; filter: alpha (opacity = 30);". Властивості як видно з прикладу схожі - тільки в першому випадку використовується число від 0 до 1, у другому відсотковий запис. Приклад такого блоку:

<div style = "position:absolute; top: 0; left: 0; background-color:rgb(18, 114, 214); width:100%; id = "VideoFrame" >

У прикладі використовується блок показу відео, який активується при натисканні мишкою на мініатюрі відео. Блоку не задана висота, оскільки вона може бути різною залежно від розміру екрана та наповненості сторінки. У зв'язку з чим вона обчислюється динамічно при відкритті відео. Приклад використання цієї техніки можна побачити на головній сторінці сайту ruscircus.ru, над яким я свого часу працював.

Ось, власне, і весь секрет прозорості в html. Ми використовуємо z-index та opacity для отримання ефекту прозорості. А вже застосування цього можна знайти безліч - тут все обмежено тільки вашою фантазією.

08.02.2013 Відповім на запитання, задані у коментарі, а саме про те, як зробити на прозорому блоці непрозорий. Тут все просто, не дарма я вказував у матеріалі посилання на матеріал про z-index, потрібно створити ще один блок, з більшим z-index, ніж у прозорого. Ось зараз, за ​​кілька хвилин, написав приклад. Блоки:

<div style = "position:absolute; top: 0; left: 0; background-color:rgb(18, 114, 214); width:100%; height:100%; opacity:0.30; filter: alpha (opacity = 30); visibility:hidden; z-index:1; id = "VideoFrame" > <div id = "VideoFrame2" style = "position:absolute; top: 25%; left: 25%; background-color: white; width:50%; height:50%; opacity:0.99; filter: alpha (opacity = 99); visibility:hidden; z-index:2; onclick = "javascript:HideForm();" >Тут пишемо текст</ div >

І функції на javascript

< script type= "text/javascript" >function ShowForm() ( document.getElementById ("VideoFrame" ) .style .visibility = "visible" ; document.getElementById ("VideoFrame2" ) .style .visibility = "visible" ; ) функція HideForm() ( document. VideoFrame" ) .style .visibility = "hidden" ; document.getElementById ("VideoFrame2" ) .style .visibility = "hidden" ; )

Перша функція відображає прозорий блок (разом із непрозорим текстовим блоком) - її можна прив'язати до кнопки. посилання і т.п.. Друга функція у мене прив'язана до клацання мишкою на блоці з текстом - вона приховує прозорий блок.

Сподіваюся вніс ясність у те, як це працює. Ну а якщо ні – запитуйте.

Прозорість у CSS досить модна техніка останнім часом, яка викликає труднощі у кросбраузерній реалізації. До цих пір не існує універсального методу, який дозволяв би реалізувати прозорість для всіх браузерів. Проте останнім часом ситуація помітно покращала.

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

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

Старий підхід

У старих версіях Firefox та Safari необхідно застосовувати властивість таким чином:

#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )

Властивість -khtml-opacity використовувалася у старих версіях webkit-браузерів. Ця властивість застаріла і більше не потрібна, крім випадків, коли ви впевнені, що значна частина трафіку вашого сайту походить від відвідувачів, які використовують Safari 1.x, що, звичайно, малоймовірно.

У наступному рядку використовується властивість -moz-opacity, яка працювала на ранніх версіях двигуна Mozilla. Firefox припинив його підтримку у версії 0.9.

CSS прозорість у Firefox, Safari, Chrome та Opera

Для більшості сучасних браузерів достатньо використати таку властивість:

# myElement ( opacity: .7; )

У наведеному прикладі елементу встановлюється значення непрозорості 70% (30% прозорості). Тобто якщо ми встановимо значення в одиницю, то елемент буде непрозорим, і, відповідно, встановлення цього значення в нуль зробить його невидимим.

Властивістю opacity обробляється 2 десяткові цифри. Тобто значення ".01" відрізнятиметься від значення ".02", хоч це й мало помітно.

CSS прозорість для Internet Explorer

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

#myElement ( filter: alpha(opacity=40); )

У цьому прикладі використовується властивість filter , яка працює у версіях 6-8, проте для версій 6 і 7 є одне обмеження: елемент властивість hasLayout має бути встановлено в true . Ця властивість присутня тільки в IE і докладніше про неї можна почитати, наприклад, на Хабрі.

Ще один спосіб встановити прозорість використовуючи CSS в IE8 - це використовувати наступний підхід (зверніть увагу на коментарі):

#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* працює в IE6, IE7 та IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * Тільки для IE8 */ )

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

Встановлення та зміна CSS прозорості за допомогою JavaScript або jQuery

Ви можете використовувати наступний код для встановлення прозорості:

Document.getElementById("myElement").style.opacity = ".4"; // Більшість браузерів document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE

Звичайно ж, у цьому випадку набагато простіше використовувати jQuery, крім того, працюватиме у всіх браузерах:

$("#myElement").css(( opacity: .4 )); // працює у всіх браузерах

Ви можете анімувати цю властивість:

$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Анімація завершена; цей код працює у всіх браузерах. ));

Функція RGBA

У CSS3 планується підтримка альфа-каналу за допомогою функції rgba. Ця функція працює у Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Використовується вона так:

# rgba ( background: rgba (98, 135, 167, .4); )

У цьому випадку останній параметр вказує на рівень непрозорості.

Функція HSLA

Подібно до попередньої функції, CSS3 також дозволяє задати напівпрозорий колір за допомогою функції HSLA , параметри якої означають тон (Hue), насиченість (Saturation), яскравість (Lightness) та альфа-канал (Alpha).

# hsla (Background: hsla (207, 38%, 47%, .4); )

Важливий момент при використанні функцій rgba і hsla - те, що установка прозорості не застосовується до дочірніх елементів, тоді як використання властивості opacity - успадковується.