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, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Це є довготривалий факт, що довіра буде віддалена згідно з readable content of a page when looking at its layout. Доказом використання Lorem Ipsum є те, що він має більш-менш загальне розміщення повідомлень, як можна використовувати "Натисніть тут, content here", making it look like readable English. Багато робочих пакетів і веб-сторінок веб-сторінок, що використовуються Lorem Ipsum як їхній дефектний текстовий текст, і search for "lorem ipsum" буде завантажувати багато веб-сайтів, що знаходяться в їхній infancy. Різні versions мають evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

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

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

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

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

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

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

І функції на javascript

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

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

Створення прозорого фону в 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.

Браузер 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; text-align: center; ) Спробувати »

Примітка: значення RGBA не підтримуються у браузері IE8 та попередніх версіях. Для оголошення резервного варіанту кольору для старих браузерів, які не підтримують значення кольорів з альфа-каналами, слід зазначити його першим значення RGBA: background: rgb(255,255,0); background: rgba(255,255,0,0.5);

/* 06.07.2006 */

CSS прозорість (css opacity, javascript opacity)

Ефект прозорості – це тема цієї статті. Якщо вам цікаво дізнатися, як зробити елементи html-сторінки прозорими, використовуючи CSS або Javascript, і як досягти крос-браузерності (однакової роботи в різних браузерах) з урахуванням браузерів Firefox, Internet Explorer, Opera, Safari, Konqueror, милості просимо. До того ж розглянемо готове рішення поступової зміни прозорості за допомогою JavaScript.

CSS opacity (CSS прозорість)

CSS opacity симбіоз

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

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 та нижче */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 *//* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9*/

По суті, потрібними є перше і останнє правила, для IE5.5+ і браузерів, що розуміють CSS3 opacity, а два правила по середині явно погоди не роблять, але й не дуже й заважають (самі вирішуйте, чи потрібні вони вам).

Javascript opacity симбіоз

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

Function setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Якщо не існує елемент із зазначеним id або браузер не підтримує жодного з відомих функції способів керування прозорістю if (opacityProp=="filter") // Internet Exploder 5.5+ (nOpacity *= 100; // Якщо вже встановлено прозорість, то змінюємо її через колекцію filters, інакше додаємо прозорість через style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того, щоб не затерти інші фільтри використовуємо "+=") else // Інші браузери elem.style=nOpacity; ) function getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 і молодше, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return "filter"; return false; //Ні прозорості }

Функція приймає два аргументи: sElemId - id елемента, nOpacity - речове число від 0.0 до 1.0, що задає прозорість у стилі CSS3 opacity.

Думаю, що варто пояснити частину коду функції setElementOpacity, що відноситься до IE.

Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";

Може виникнути питання, а чому б не встановлювати прозорість шляхом привласнення (=) властивості elem.style.filter = "..."; ? Навіщо використовується "+=" для додавання до кінця рядка властивості filter ? Відповідь проста, щоб не "затерти" інші фільтри. Але при цьому, якщо додати фільтр таким чином вдруге, він не змінить раніше встановлені значення цього фільтра, а буде просто доданий в кінець рядки властивості, що не коректно. Тому, якщо фільтр вже встановлений, потрібно їм маніпулювати через колекцію застосованих до елемента фільтрів: elem.filters (але врахуйте, якщо фільтр ще не був призначений елементу, то керувати ним через дану колекцію неможливо). Доступ до елементів колекції можливий або на ім'я фільтра, або на індексі. Однак фільтр може бути заданий у двох стилях, короткому стилі IE4, або в стилі IE5.5+, що і враховано в коді.

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

Готове рішення. Використовуємо бібліотеку opacity.js

fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)" src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)" src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)" src="/img/sweet_cherry.jpg" width="98" height="97" />

Основні кроки:

1. Підключаємо бібліотеку функцій;
2. Визначаємо правила використовуючи метод fadeOpacity.addRule();
3. Викликаємо метод fadeOpacity()зміни прозорості від початкового значення до кінцевого, або fadeOpacity.back()повернення до початкового значення рівня прозорості.

Розжовуємо

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

Правила визначаються за допомогою методу fadeOpacity.addRule

Синтаксис: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Аргументи:

• sRuleName - ім'я правила, що задається довільно;
• nStartOpacity і nFinishOpacity - початкова та кінцева прозорість, числа в діапазоні від 0.0 до 1.0;
• nDelay - затримка в мілісекундах (необов'язковий аргумент, за замовчуванням, дорівнює 30).

Сам виклик фейдингу прозорості робимо через методи fadeOpacity(sElemId, sRuleName), де sElemId це id елемента, а sRuleName - ім'я правила. Для повернення прозорості у вихідний стан використовується метод fadeOpacity.back(sElemId).

:hover для простої зміни прозорості

Ще зазначу, що для простої зміни прозорості (але не поступової її зміни) саме підходить псевдо-селектор :hover, який дозволяє визначити стилі елемента в момент наведення на нього миші.

Зверніть увагу, що зображення розміщено всередині елемента A. Справа в тому, що Internet Explorer аж до версії 6, розуміє псевдо-селектор:hover, тількистосовно посилань, а не будь-яких елементів, як належить у CSS (в IE7 положення виправлено).

Прозорість та зазубрений текст у IE

З виходом Windows XP з'явилося згладжування екранних шрифтів методом ClearType, а разом з ним і побічні ефекти в IE при використанні цього методу згладжування. Щодо нашого випадку, якщо застосовується прозорість до елемента з текстом при включеному методі згладжування ClearType, то текст перестає нормально відображатися (напівжирний текст - bold, наприклад, двоїться, можуть так само з'являтися різні артефакти, наприклад, у вигляді рис, зазубреного тексту). Для того, щоб виправити положення, для IE потрібно задати фоновий колір, CSS властивість background-color, елемент до якого застосовується прозорість. На щастя в IE7 баг усунуто.