Для створення ефекту прозорості в CSS використовується властивість opacity.

Браузер IE8 і більш ранні його версії підтримують альтернативне властивість - filter: alpha (opacity \u003d x), де "x" може приймати значення від 0 до 100, чим менше значення, тим прозоріше буде елемент.

Всі інші браузери підтримують стандартне CSS властивість opacity, яке може приймати в якості значення числа від 0.0 до 1.0, чим менше значення, тим прозоріше буде елемент:

спробувати зараз »

Прозорість при наведенні

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

спробувати зараз »

прозорість фону

Є два можливі способи зробити елемент прозорим: властивість opacity, описане вище, і вказівка \u200b\u200bкольору фону в 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 \u003d 70); / * для IE8 і більш ранніх версій * / text-align: center;) .prim2 (width: 400px; margin: 30px 50px; background-color: rgba (255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center;) Спробувати »

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

Влад Мержевіч

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

Блок з градієнтом

Зробіть блок, показаний на рис. 1. Блок містить напівпрозору градиентную рамку з градієнтним фоном під заголовком і невеликим покажчиком. Фон на сторінці наведено лише для наочності ефекту напівпрозорості, ви можете вказати будь-яку свою картинку. Мінімальна висота блоку складає 100px.

Як зробити шар напівпрозорим?

Для зміни ступеня прозорості елемента застосовується стильова властивість opacity зі значенням від 0 до 1, де 0 відповідає повній прозорості, а 1, навпаки, непрозорості об'єкта. У браузері Internet Explorer це властивість не працює, тому спеціально для нього доводиться використовувати filter, властивість, що не входить в специфікацію CSS. У прикладі 1 показано, як встановити прозорість шару для всіх браузерів.

напівпрозорий фон

Влад Мержевіч

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

Як встановити таблицю напівпрозорої, а частина осередків немає?

Для зміни прозорості елемента в CSS3 передбачено властивість opacity, його значення може змінюватися від 0 до 1. Нуль відповідає повної прозорості елемента, а одиниця, навпаки, непрозорості. Сучасні браузери цілком коректно працюють з цією властивістю за винятком браузера Internet Explorer, тому для нього доводиться використовувати спеціальне властивість filter зі значенням alpha (Opacity \u003d X), де X може змінюватися від 0 до 100.

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

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

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

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

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

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

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

fadeOpacity (this.id, "oR1")"Onmouseout \u003d" fadeOpacity.back (this.id)"Src \u003d" / img / strawberry.jpg "width \u003d" 100 "height \u003d" 80 "/\u003e fadeOpacity (this.id, "oR1")"Onmouseout \u003d" fadeOpacity.back (this.id)"Src \u003d" / img / tomato.jpg "width \u003d" 82 "height \u003d" 100 "/\u003e fadeOpacity (this.id, "oR1")"Onmouseout \u003d" fadeOpacity.back (this.id)"Src \u003d" / img / sweet_cherry.jpg "width \u003d" 98 "height \u003d" 97 "/\u003e

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

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 баг усунутий.

Для управління прозорістю елементів сторінки використовується властивість 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 \u003d element.style.opacity; // установка нового значення element.style.opacity \u003d 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

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

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

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

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

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