Як встановити прозорість в css - прозорий блок. CSS прозорість - крос-браузерне рішення Плавна зміна прозорості елемента

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

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

Розглянемо напівпрозорість тексту та фону – як правильно її використовувати в дизайні сайту:

Основна особливість цієї властивості полягає в тому, що значення прозорості діє на все дочірні елементивсередині, а не лише на тлі. Це означає, що фон і текст стануть напівпрозорими. Збільшити прозорість можна змінюючи команду opacity від 0.1 до 1.

HTML 5 CSS 3 IE 9 opacity body ( background: url(images/cat.jpg); ) div ( opacity: 0.6; background: #fc0; /* Колір тла */ padding: 5px; /* Поля навколо тексту */ ) Створення та просування сайтів в інтернеті

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

Зазвичай у дизайні напівпрозорим має бути лише тло елемента, а текст непрозорим для збереження його читабельності. Властивість opacity тут не підходить, тому що текст усередині елемента також буде частково прозорим. Найкраще використовувати формат RGBA, частиною якого є альфа-канал або іншими словами значення прозорості. Як значення пишеться rgba, потім у дужках через кому перераховуються значення червоної, синьої та зеленої компоненти кольору. Останнім йде прозорість, яка задається від 0 до 1, при цьому означає 0 повну прозорість, а 1 непрозорість кольору - синтаксис застосування rgba.

Напівпрозоре тло HTML 5 CSS 3 IE 9 rgba body ( background: url(images/cat.jpg); ) div ( background: rgba(0, 170, 238, 0.4); /* Колір фону */ color: #fff; / * Колір тексту */ padding: 5px;/* Поля навколо тексту */ ) Створення та просування сайтів в інтернеті. Значення непрозорості для фону встановлено на 90% - напівпрозорий фон та непрозорий текст.

Для керування прозорістю елементів сторінки використовується властивість CSS opacity. За специфікацією воно застосовується до вузлів будь-якого типу та підтримується у всіх сучасних браузерах. З його допомогою можна створити цікавий дизайн або реалізувати зручну інтерактивну взаємодію з користувачем.

Синтаксис властивості opacity у css виглядає так:

Selector ( opacity: 1; ) selector ( opacity: 0; ) selector ( opacity: 0.4; )

На вхід приймаються числові значення в діапазоні від 0 до 1. Параметр може являти собою частки одиниці, при цьому як роздільник цілої та дробової частини CSS використовується точка.

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

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

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

Parent ( opacity: 0.7; ) child ( opacity: 1; )

У подібній ситуації елемент child буде на 30% прозорим, незважаючи на те, що значення opacity дорівнює одиниці.

Приклад 1. Напівпрозорість. Необхідно, щоб під елементом target було видно основне тло блоку.

Target ( background: black; opacity: 0.5; )

Напівпрозорим стає не тільки тло блоку target, але й текст.

Приклад 2. Динамічне керування прозорістю. Значення властивості CSS opacity блоку target змінюється при наведенні курсора.

Target ( opacity: 0.2; ) .target:hover ( opacity: 1; )

Останній приклад показує, що прозорі елементи продовжують реагувати на події сторінки, такі як наведення курсору. Це дозволяє використовувати JavaScript для керування властивістю CSS opacity, а також застосовувати механізми transition та animation для плавної зміни режиму відображення.

Щоб отримати доступ до прозорості зі скрипту, необхідно звернутися до об'єкта style конкретного елемента.

// Отримання поточного значення прозорості var opacity = element.style.opacity; // Встановлення нового значення element.style.opacity = 0.4;

Плавне зникнення блоку можна реалізувати за допомогою CSS-властивості transition:

Element ( opacity: 0.1; transition: opacity 1000ms; ) element:hover ( opacity: 0.8; transition: opacity 2000ms; )

Тепер вузол element при наведенні мишки змінюватиме прозорість від 10 до 80 % протягом однієї секунди, а при відході курсору - тьмяніти до вихідного значення протягом двох секунд.

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

Головні тонкощі механізму opacity у CSS:

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

Якщо ці ефекти ускладнюють життя верстальника, замість opacity слід використовувати просто прозоре тло, визначивши його значення в форматі RGBAабо HSLA.

/* 06.07.2006 */

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

Під симбіозом я маю на увазі об'єднання різних стилів для різних браузерівв одному 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, а два правила по середині явно погоди не роблять, але й не дуже й заважають (самі вирішуйте, чи потрібні вони вам).

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

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 ="+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

img ( filter:alpha(opacity = 30); затримки впливає швидкість зміни прозорості fadeOpacity.addRule("oR1", .3, 1, 30); 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" />

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

Правила визначаються за допомогою методу 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 , який дозволяє визначити стилі для елемента, в момент наведення на нього миші.

a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; )

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

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

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, у другому відсотковий запис. Приклад такого блоку: