Створення прозорого фону в 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
Властивість CSS opacity відповідає за прозорість елементів (картинки, тексту, блоки) у html.
Синтаксис CSS opacity
opacity: value;
Де value може набувати речових значень в діапазоні від 0.0 до 1.0. Значення 1.0 означає, що прозорість відсутня (за замовчуванням).
Приклади: як прозорість у html
Приклад №1. Прозоре зображення у html
Перша картинка виведена без прозорості, друга з прозорістю 0.5
Пример №2. Эффекты с прозрачностью в html
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в html
Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
На странице преобразуется в следующее
Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
object.style.opacity ="VALUE "
Для создания эффекта прозрачности в CSS используется свойство opacity .
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство - filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:
Спробувати »Прозорість при наведенні
Псевдо-клас:hover дозволяє змінювати зовнішній вигляделементів при наведенні ними курсора миші. Ми скористаємося цією можливістю, щоб зображення при наведенні миші втрачало свою прозорість:
Спробувати »Прозорість фону
Є два можливих способівзробити елемент прозорим: властивість opacity , описана вище, та вказівка кольору фону у форматі RGBA.
Можливо, ви вже знайомі з моделлю представлення кольору у форматі RGB. RGB (Red, Green, Blue – червоний, зелений, синій) – колірна система, що визначає відтінок шляхом змішування червоного, зеленого та синього кольорів. Наприклад, для завдання жовтого кольору для тексту можна скористатися будь-якою з наступних об'яв:
Color: rgb(255,255,0); color: rgb(100%,100%,0);
Кольори, задані за допомогою RGB, відрізнятимуться від шістнадцяткових значень, використовуваних нами раніше тим, що дозволяють використовувати альфа-канал прозорості. Це означає, що крізь фон елемента з альфа-прозорістю буде видно, що знаходиться під ним.
Оголошення кольору RGBA схоже за синтаксисом зі стандартними правилами RGB. Однак, крім іншого, нам потрібно буде оголосити значення як RGBA (замість RGB) і задати додаткове десяткове значення прозорості після значення кольору в проміжку від 0.0 (повна прозорість) до 1 (повна непрозорість).
Color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);
Різниця між властивістю opacity та RGBA полягає в тому, що властивість opacity застосовує прозорість до всього елемента цілком, тобто весь вміст елемента стає прозорим. А RGBA дозволяє встановити прозорість окремим частинам елемента (наприклад, тільки тексту або фону):
Body ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha (opacity = 70); / * для IE8 і більш ранніх версій * / text-align: center; 1px solid black; font-weight: bold;
Примітка: значення RGBA не підтримуються у браузері IE8 і більше ранніх версіях. Для оголошення резервного варіанта кольору для старих браузерів, які не підтримують значення кольорів з альфа-каналами, слід зазначити його першим значення RGBA: background: rgb(255,255,0); background: rgba(255,255,0,0.5);
Опис
Визначає рівень прозорості веб-сторінки. При частковій або повній прозорості через елемент проступає фоновий малюнок або інші елементи, розташовані нижче за напівпрозорий об'єкт.
Синтаксис
opacity: значення
Значення
Як значення виступає число з діапазону. Значення 0 відповідає повній прозорості елемента, а 1 навпаки - його непрозорості. Дробові числа виду 0.6 встановлюють напівпрозорість. Допускається писати числа без нуля попереду, виду opacity: .6 .
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Результат даного прикладупоказано на рис. 1.
Мал. 1. Результат використання opacity
Браузери
Firefox до версії 3.5 підтримує нестандартну властивість -moz-opacity.
Internet Explorer до версії 9.0 для зміни прозорості використовує фільтри, для цього браузера слід записати filter : alpha(opacity=50) , де параметр opacity може набувати значення від 0 до 100.
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%.
Приклад коду:
Ось результат розміщеного вище коду:
