Създаване на прозрачен фон в HTML и CSS (непрозрачност и RGBA ефекти). Прозрачност с помощта на CSS Css слой прозрачност
Описание
Определя нивото на прозрачност на елемент от уеб страница. Когато елементът е частично или напълно прозрачен, фоновото изображение или други елементи, разположени под полупрозрачния обект, се появяват през елемента.
Синтаксис
непрозрачност: стойност
Ценности
Стойността е число от диапазона. Стойност 0 съответства на пълната прозрачност на елемента, а 1, напротив, съответства на неговата непрозрачност. Дробните числа от формата 0,6 задават полупрозрачност. Разрешено е да се записват числа без водеща нула, като opacity: .6.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Резултатът от този пример е показан на фиг. 1.
ориз. 1. Резултат от използването на непрозрачност
Браузъри
Firefox преди версия 3.5 поддържа нестандартното свойство -moz-opacity.
Internet Explorer до версия 9.0 използва филтри за промяна на прозрачността; за този браузър трябва да напишете филтър: alpha(opacity=50), където параметърът opacity може да приема стойност от 0 до 100.
CSS3 дефинира свойството opacity за прилагане на прозрачен ефект към елементите на страницата. Стойността на това свойство е число в диапазона от 0,0 до 1,0. При стойност, равна на нула, елементът става напълно прозрачен, а при стойност, равна на единица, той изобщо не става прозрачен. Свойството може да се приложи към всякакви елементи на страницата.
Img1 (непрозрачност: 0,2;) .img2 (непрозрачност: 0,5;) .img3 (непрозрачност: 1,0;)
За да зададете прозрачност чрез скрипт, използвайте: object.style.opacity
Старите Mozilla и Firefox 0.8 използват собствено име за това свойство: -moz-opacity За да зададете прозрачност чрез скрипт, използвайте: object.style.MozOpacity
Safari 1.1, Konqueror 3.1 - изграден върху KHTML двигателя, използвайте следното свойство за контрол на прозрачността: -khtml-opacity За да зададете прозрачност чрез скрипт, използвайте: object.style.KhtmlOpacity
Safari от версия 1.2 използва непрозрачност на CSS3, но Konqueror, по-стара от версия 3.1, след като спря да поддържа -khtml-opacity, не въведе поддръжка за непрозрачност на CSS3.
Internet Explorer, започвайки от версия 5.5 и включително най-новата версия на Internet Explorer 7, прилага прозрачност чрез Alpha DirectX филтъра. Струва си да се отбележи, че този филтър използва стойност на прозрачност в диапазона от 0 до 100 (а не от 0,0 до 1,0). Също така отбелязвам, че филтърът може да се приложи само към елемент със свойството височина, ширина или позиция, зададено на absolute, или writingMode на tb-rl, или с contentEditable, настроено на true.
Пример (задаване на прозрачност наполовина):
Img1 (filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* IE5.5+ синтаксис (предпочитан) */ .img2 (filter: alpha(opacity=50); ) /* IE4 синтаксис */ Към задайте прозрачност чрез скрипт, използвайте: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(параметърен низ)"
За да получите прозрачност, подобна на прозрачността на W3C, използвайте стойността „opacity=число от 0 до 100“ като низ на параметър.
Как да го накарам да работи във всички браузъри:
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 */ непрозрачност: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */Javascript
функция 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; // Ако прозрачността вече е зададена, променете я чрез колекцията от филтри, в противен случай добавете прозрачност чрез style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid: DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // За да не презапишете други филтри, използвайте "+=" ) else // Други браузъри elem.style = nOpacity; ) функция getOpacityProperty() ( if ( typeof document.body.style.opacity == "string") // CSS3 съвместим (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string ") // Mozilla 1.6 и по-стари версии, Firefox 0.8 връщат "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+ връща "филтър";
връща невярно; //без прозрачност) Чиииии!Чудех се дали да пиша за свойството прозрачност за CSS 3? Да, сега ще хвърчат много забележки към мен, че всички вече знаят за този имот! Ха, не! Сигурен съм, че не всички.
В момента повечето от най-новите версии на съвременните браузъри вече поддържат CSS 3 ( !!!Дори IE 9!!!). Така че вече можете да опитате да внедрите тези свойства в кодовете на вашите страници.
И така, да се върнем към собствеността "
"!!!Дори IE 9!!!непрозрачност
“, което дава интересен ефект, без намесата на графика, само с написването на 1 ред код. Какво е "непрозрачност" в CSS 3?" определя прозрачността на всеки елемент на уеб страница. Тоест, като зададем определено ниво на прозрачност, ще можем да видим фоновото изображение или друг елемент, който ще се намира под елемента, за който е зададена прозрачност. Удобно, не е ли
Сега ще ви разкажа по-подробно как внедрих това.
Трябва да зададем прозрачността по подразбиране за елемента. Тоест елементът ще изглежда малко скучен. Зададох непрозрачността на 70%. Но тъй като всички браузъри разбират кода по различен начин, трябва да напишем универсален код.
За Firefox,Опера,Chromeпишем:
Непрозрачност: X;
къде " X" - стойност в диапазона от 0.0 1.0 (непрозрачност на елемента).
За Internet Explorer(поддържа 8 и 9 версии):
Филтър: алфа (непрозрачност = X);
къде " X" - стойност в диапазона от 0 (пълна прозрачност на елемента) до 100 (непрозрачност на елемента).
Myimage (непрозрачност:0,7; филтър:алфа(непрозрачност=70); )
Сега нека зададем правилата за елемента, когато курсорът на мишката е поставен върху него. Трябва да видим ясно показване на елемента и за това задавам непрозрачността на 100%, тоест елементът изглежда така, както е в действителност:
Myimage:hover (opacity:1.0; filter:alpha(opacity=100); )
Ето няколко примера:
Прозрачност на снимките100 (1.0), тоест няма прозрачност
Прозрачност на снимките70 (0.7). Многоцветните кръгове са картина, която „пробива“, която се намира на фона, т.е. под снимката
Свойството opacity на CSS отговаря за прозрачността на елементите (картинки, текст, блокове) в html.
Синтаксис за непрозрачност на CSS
непрозрачност: стойност;
Където стойността може да приема реални стойности в диапазона от 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 "
Доброго времени суток, гики веб-разработки, а также ее новички. Для тех, кто не следит за трендами IT-области, а точнее за веб-модой, я хочу торжественно сообщить, что эта публикация на тему: «Как сделать прозрачный блок css инструментами» вам как раз кстати. Ведь в текущем 2016 году внедрение в онлайн-сервисы различных прозрачных объектов считается стильным ходом.
Поэтому в этой статье я расскажу вам о всех существующих способах создания прозрачности, начиная от допотопных решений, сделаю акценты на совместимости решений с браузерами, а также приведу конкретные примеры программного кода. А теперь за работу!
Способ 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 |
|
Този метод обаче не е удобен поради няколко причини:
- Internet Explorer 6 не работи с тази технология, трябва да напишете скриптов код за него;
- Не можете да промените цветовете на фона в css;
- Ако функцията за показване на изображения на браузъра е деактивирана, тя ще изчезне.
Метод 3. Популяризиран
Най-често срещаният и добре известен начин да направите блок прозрачен е свойството !!!Дори IE 9!!!.
Стойността на параметъра варира в диапазона, където при 0 обектът е невидим, а при 1 е напълно видим. Тук обаче има и неприятни моменти.
Първо, всички дъщерни елементи наследяват прозрачност. Това означава, че въведеният текст също ще „свети“ заедно с фона.
Второ, Internet Explorer отново „вири носа си“ и до версия 8 не работи с !!!Дори IE 9!!!.
За да разрешите този проблем, използвайте филтър:алфа (Непрозрачност=стойност).
Нека разгледаме един пример.
| 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 извежда грешка при комбиниране на свойства цвят на фонас името на цветовете (фонов цвят: златен). Следователно трябва да използвате само:
цвят на фона: 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%.
С това публикацията приключва. Абонирайте се за моя блог и не забравяйте да поканите приятели. Желая ви успех в изучаването на уеб езици! Чао чао!