Іноді виникає потреба зробити прозорий фондля певного блоку на сторінці. Досягти цього ефекту можна створенням прозорого фонового малюнкау форматі *.pngі встановивши його через властивість background: url(“./images/fon.png”);.

Використовуємо властивість OPACITY

Навіщо такі складнощі, якщо це можна зробити з допомогою CSS. Давайте створимо на сторінці основний блок ( page) і вкладений блок ( block), якому задамо прозорість. Кроссбраузерність досягається так: властивість для Internet Explorer – filter:alpha(opacity=50) (значення прозорості в діапазоні від 0 до 100), для браузерів із підтримкою CSS3 стандарту – opacity:0.5 (число у діапазоні від 0.0 до 1.0).

HTML код:

Результат:

Прозорий фон для блоку

Як Ви помітили, прозорість поширюється на всі дочірні елементи

Прозорий фон для блоку

в DIVз класом blockі вони можуть перевищити значення прозорості свого батька. Тобто все що знаходиться в даному блоці стає прозорим. Що робити, якщо треба залишити прозоре тло тільки у дива?

Використовуємо властивість BACKGROUND-COLOR

Нам необхідно внести деякі зміни до таблиці стилів CSS, а саме замінити для блоку DIVз класом blockвластивість opacityна властивість background-color.

Div.block ( width:260px; height:140px; margin-top:79px; margin-left:94px; border:1px solid #333333; /* прозорий фон тільки DIV.block */ background-color: rgba(255, 255 , 255, 0.5);/* Колір тла, прозорість 0.5*/ )

Результат:

Прозорий фон для блоку

У наведеному вище прикладі використовується для кольору і фону формат RGBA . Де перші три літери розшифровуються як red, green, blue (червоний, зелений, синій), остання символізує собою альфа-канал (a) і ставить прозорістьь елемента від 0.0 до 1.0 .

Background-color: rgba(r, g, b, a);

У дужках замість літер ставиться значення компонента кольору, його можна подивитися у будь-якому графічному редакторі, наприклад Paint.Net(Скріншот). Останнє ж значення aвстановлює прозорість та збігається зі значенням властивості opacity.

http://cp77.comxa.com/verstka/css-transparent-fon

CSS-властивість opacityвстановлює непрозорість елемента. Непрозорість - це ступінь, у якій вміст ховається за елементом, є протилежністю прозорості.

Source для цього інтерактивного прикладу є встановленим в GitHub репозиторії. Якщо ви думаєте про те, щоб розширити проекти, повторити clone https://github.com/mdn/interactive-examples and send us a pull request.

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

Використання opacity зі значенням, відмінним від 1, поміщає елемент у новий контекст накладання.

Приклади

Базовий приклад

div (background-color: yellow; ). ; /* Видимість тексту дуже чітка на тлі */ )

Різна непрозорість з:hover

img.opacity ( opacity: 1; filter: alpha(opacity=100); /* IE8 і нижче */ zoom: 1; /* Тригери "hasLayout" в IE 7 і нижче */ ) img.opacity:hover ( opacity: 0..png" alt="(!LANG:MDN logo" width="128" height="146" class="opacity"> !}

Проблеми доступності

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

Коефіцієнт колірної контрастності визначається шляхом порівняння яскравості тексту з відкоригованою непрозорістю та значенням кольору тла. Щоб відповідати чинним Рекомендаціям щодо доступності веб-контенту (WCAG), для текстового вмісту потрібне співвідношення 4.5:1 і 3:1 для більшого тексту, такого як заголовки. Великий текст визначається як 18.66px або більше, або 24px або вище.

Специфікації

Початкове значення	1.0
Застосовується до	всі елементи
успадковується	ні
Відображення	візуальний
Обробка значення	вказане значення обрізається до діапозону
Animation type	інтерполуються як речові числа з плаваючою комою.
Канонічний порядок	унікальний неоднозначний порядок, визначений формальною граматикою

Підтримка браузерами

Компактність таблиці на цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Комп'ютери						Мобільні
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
opacity	Chrome Повна підтримка 1	Edge Повна підтримка 12	Firefox Повна підтримка 1 Повна підтримка 1 Немає підтримки 1 - 3.5 З префіксом З префіксом Вимагає вендорний префікс: -moz-	IE Повна підтримка 9	Opera Повна підтримка 9	Safari Повна підтримка 2 Повна підтримка 2 Немає підтримки 1.1 - 2 З префіксом З префіксом Вимагає вендорний префікс: -khtml-	WebView Android Повна підтримка 1	Chrome Android Повна підтримка 18	Firefox Android Повна підтримка 4	Opera Android Повна підтримка 10.1	Safari iOS Повна підтримка 1	Samsung Internet Android Повна підтримкаТак
Support for percentage opacity values	Chrome Повна підтримка 78	Edge Немає підтримки Ні	Firefox Повна підтримка 70	IE Немає підтримки Ні	Opera Немає підтримки Ні	Safari Немає підтримки Ні	WebView Android Повна підтримка 78	Chrome Android Повна підтримка 78	Firefox Android Немає підтримки Ні	Opera Android Немає підтримки Ні	Safari iOS Немає підтримки Ні	Samsung Internet Android Немає підтримки Ні

Легенда

Повна підтримкаПовна підтримка Немає підтримкиНемає підтримки Потрібно вендорний префікс або інше ім'я для використання. Потрібно вендорний префікс або інше ім'я для використання.

Властивість CSS 3 opacityдозволяє робити прозорим той чи інший елемент сайту.

Ступінь прозорості елемента визначається значенням від 0 до 1 де 0 - повністю прозорий а 1 – непрозорий зовсім. Так наприклад значення 0.5 властивості opacityзастосованого до картинки означатиме що це зображеннямає бути напівпрозорим.

Прозорість у IE

Браузер Internet Explorer не підтримує властивості opacityаж до дев'ятої версії, однак має свій власний фільтр, за допомогою якого можна задати ступінь прозорості:

filter: alpha(opacity=50)

Значення opacityдля фільтра браузера Internet Explorer може змінюватись від 0 - повністю прозорий до 100 - непрозорий

Блоки цього меню при наведенні курсору будуть напівпрозорими та в IE!!

Головна
Карта сайту
Купити слона
Продати слона
Взяти слона на прокат

Префікс.

На цьому можна було б у принципі закінчити розділ про прозорість, але я хотів би Вам ще розповісти про так звані вендорні префікси.. особливого відношення ці товариші до даного розділу не мають, проте далі по ходу навчання CSS3 вони будуть зустрічатися все частіше і десь про них потрібно розповісти - тому розповім тут.

Отже, вендорні префікси – це особливі приставки до властивостей CSS, що використовуються браузерами для експериментальних властивостей, які офіційно не входять до специфікації CSS.

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

Чому на свій страх та ризик? Так тому що є ймовірність, що коли буде офіційно затверджено специфікацію CSS 3, описані в ній властивості по своїй дії будуть відрізнятися від властивостей з таким же ім'ям, які вже використовуються браузерами. Ну от збрендит допустимо розробникам специфікації CSS 3 позначити властивість opacityне як ступінь прозорості блоку, а наприклад як його штрихування або мерехтіння (маячня звичайно пишу), що тоді відображатимуть вже мільйони встановлених браузерівдля яких opacityце саме прозорість!

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

З цих та інших причин браузери використовують префікси спочатку властивостей, які не входять до офіційної специфікації. У кожного браузера свій префікс, що починається зі знака «-», цей знак спочатку властивості, як втім і цей знак «_», згідно специфікації CSS 2.1 позначає що властивість зарезервована для CSS розширень тих чи інших браузерів.

Ось найбільш популярні браузери та їх префікси:

Браузер	Префікс
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 і вище	-ms-
Safari до версії 3, Konqueror	-khtml-
Safari 3 і вище, Google Chrome	-webkit-

Використовувати префікси дуже легко достатньо взяти будь-яку властивість CSS і підставити до нього потрібний префікс, наприклад, до властивості opacityпідставляємо -moz-виходить: -moz-opacity

Хоча насправді мій вираз використовувати префіксиНевірно! насправді нічого нікуди не підставляється, просто є властивість opacity, а є -moz-opacityі це дві різні властивості які необов'язково повинні виконувати одну й ту саму функцію!! - це слід розуміти.

А ще слід розуміти, що ті чи інші конкретні браузери до певних версійможуть підтримувати CSS властивості тільки зі своїми префіксами (знову неправильно висловлююся, правильно говорити свої власні властивості - браузерні CSS розширення), а можуть спочатку покладатися на нехай навіть специфікації, що розробляються. – Кожен конкретний випадок у цьому підручнику ми розглядатимемо окремо.

Що ж до цієї глави про прозорість, то слід зазначити, що браузер Firefox 3.5 та його більше ранні версіївикористовують свою власну властивість -moz-opacity, а браузер Safariдо версії 1.1 використовує свою властивість -khtml-opacity .

Так щоб зробити наш приклад повністю кросбраузерним нам знадобиться додати в код ще пару рядків:

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

Ну а тепер корисні поради.

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

/* 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 баг усунуто.

Доброї доби, гіки веб-розробки, а також її новачки. Для тих, хто не слідкує за трендами IT-області, а точніше за веб-модою, я хочу урочисто повідомити, що ця публікація на тему: «Як зробити прозорий блок cssінструментами» вам якраз до речі. Адже цього року впровадження в онлайн-сервіси різних прозорих об'єктів вважається стильним ходом.

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

Спосіб 1. Допотопний

Коли ще були слабкі комп'ютериі не розвинені «здібності», девелопери придумали свій спосіб створення прозорого фону: використання прозорих пікселів по черзі із кольоровими. Таким чином створюваний блок при масштабуванні виглядав як шахівниця, однак у звичайному розмірі він нагадував якусь прозорість.

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

Спосіб 2. Не заморочений

В окремих випадках розробники вирішують проблему з використанням напівпрозорої картинки шляхом вставки ... вже готової напівпрозорої картинки! Для цього використовуються зображення, збережені у форматі PNG-24. Даний графічний формат дозволяє задавати 256 рівнів напівпрозорості.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Однак такий спосіб не зручний з кількох причин:

1. Internet Explorer 6 не працює з такою технологією, йому потрібно писати скриптовий код;
2. Не можна змінювати кольори фону в CSS;
3. Якщо в браузері вимкнено функцію відображення зображень, зникне.

Спосіб 3. Пропіарений

Найбільш поширений і всім відомий спосіб зробити якийсь блок прозорим є властивість opacity.

Значення параметра варіюється в діапазоні , де за 0 об'єкт невидимий, а за 1 – відображається повноцінно. Однак і тут є якісь неприємні моменти.

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

По-друге, Internet Explorer знову «верне носом» і аж до 8 версії не функціонує з opacity.

Для вирішення цієї проблеми використовується filter:alpha (Opacity = значення).

Розглянемо приклад.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Спосіб 4. Сучасний

Сьогодні професіонали користуються інструментом rgba (r, g, b, a).

До цього я розповідав, що RGB – це одна з найпопулярніших колірних моделей, де R відповідає за всі відтінки червоного, G – відтінки зеленого та B – відтінки синього.

У випадку з параметром cssзмінна A відповідає за альфа-канал, який у свою чергу відповідає за прозорість.

Головна перевага останнього способу- альфа-канал не торкається об'єктів, що знаходяться всередині стилізованого блоку.

rgba (r, g, b, a) підтримується починаючи з:

• 10 версії Opera;
• Internet Explorer 9;
• Safari 3.2;
• 3 версії Firefox.

Хочу відмітити цікавий факт! Гаряче улюблений Internet Explorer 7 видає помилку при поєднанні властивості background-colorз назвою кольорів (background-color: gold). Тому варто використовувати лише:

background-color: rgba (255, 215, 0, 0.15)

А зараз приклад.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

У нашому магазині ви знайдете усі види квітів.

Зверніть увагу, що текстовий контент блоку повністю помітний (100% чорний), тоді як фону заданий альфа-канал дорівнює 0,88, тобто. 88%.

На цьому публікація добігла кінця. Підписуйтесь на мій блог та не забувайте запрошувати друзів. Бажаю удачі у вивченні веб-мов! Бувай!