Има три начина за промяна на прозрачността на елемент в CSS:
използвайки свойството непрозрачност,
използвайки функцията rgba(),
използвайки функцията hsla().

1. Свойство Opacity

Свойството opacity ви позволява да направите всеки елемент от уеб страница частично или напълно прозрачен. Това свойство променя прозрачността на елементите, за които фоново изображение(картина) или фонът е зададен с помощта на цвят или градиент. Ако елемент, който има приложено свойство за непрозрачност, съдържа други елементи в него, те също ще променят своята прозрачност.
Свойството opacity приема стойности, вариращи от 0 (напълно прозрачен) до 1 (непрозрачен), например:

H1 (цвят: #CD6829;) div (фон: #CDD6DB; непрозрачност: .3; )
Ориз. 1. Прозрачност на елементи с помощта на непрозрачност

2. функция rgba().

Цветният модел RGBA създава цветови тон чрез смесване в необходимите пропорции червен, зеленоИ синцветя, и алфа канал (алфа)отговаря за степента на прозрачност на цвета. За разлика от свойството opacity, за блок, съдържащ други елементи, функцията rgba() ще промени непрозрачността само на блока.

Ориз. 2. RGB цветен модел h1 (цвят: #CD6829;) div (фон: rgba(205, 214, 219, 0.3);)
Ориз. 3. Прозрачност на елементи с помощта на функцията rgba().

3. Функция hsla()

Функцията hsla(), чиито параметри означават тон (Hue), насищане, яркостИ алфа канал (алфа), също ви позволява да зададете полупрозрачен цвят.

Цветовите нюанси се определят като проценти, като се използва съответната стойност от цветното колело. Самият кръг е разделен на сектори, на границите на които има основни цветове:

0/360° - червено
60° - жълто
120° - зелен цвят
180° - син цвят
240° - син цвят
270° - лилав цвят
300° - лилав цвят.

За да получите черно, трябва да зададете стойностите на нюанса, наситеността и яркостта на нула - hsla(0, 0%, 0%, 1) . Белият цвят се получава при 100% стойност на яркост hsla(0, 0%, 100%, 1) и сив цвят— при нулева стойност на насищане hsla(0, 0%, 50%, 1) .

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

Ефектът на полупрозрачност на даден елемент е ясно видим във фоновото изображение и е широко разпространен в различни операционна системазащото изглежда стилно и красиво. В уеб дизайна полупрозрачността също се използва и се постига чрез свойството opacity или цветовия формат RGBA, който е зададен за фон.

Градиентен блок

Направете блока, показан на фиг. 1. Блокът съдържа полупрозрачна градиентна рамка с градиентен фон под заглавието и малък показалец. Фонът на страницата е предоставен само за яснота на ефекта на полупрозрачност; можете да посочите всяка своя снимка. Минималната височина на блока е 100px.

Как да направите слой полупрозрачен?

За да промените степента на прозрачност на даден елемент, използвайте свойството стил на непрозрачност със стойност от 0 до 1, където 0 съответства на пълната прозрачност, а 1, напротив, на непрозрачността на обекта. В браузъра Internet ExplorerТова свойство не работи, така че трябва да използвате филтър специално за него, свойство, което не е част от CSS спецификацията. Пример 1 показва как да зададете прозрачност на слоя за всички браузъри.

Полупрозрачен фон

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

Частичната прозрачност, когато се използва правилно, изглежда много впечатляващо в дизайна на уебсайта. Основното е, че под полупрозрачните блокове няма монохромен дизайн, а изображение; в този случай прозрачността става забележима. Този ефект се постига по много начини и ако си спомняте всички, включително старомодните методи, това е използването на PNG изображение като фон, създаване на карирано изображение и свойството opacity. Но веднага щом възникне необходимостта да се направи полупрозрачен фон в блок, тези методи имат неприятен недостатък. Ще направя кратък преглед, за да стане ясно за какво говорим, както и за онези читатели, които не са запознати с нетрадиционните възможности за създаване на полупрозрачен ефект.

Как да настроя таблица да е полупрозрачна, но някои клетки да не са?

За да промените прозрачността на елемент, CSS3 предоставя свойството opacity, стойността му може да варира от 0 до 1. Нула съответства на пълна прозрачност на елемента, а единица, напротив, непрозрачност. Съвременните браузъри работят доста правилно с това свойство с изключение на интернет браузър Explorer, така че трябва да използвате специално филтърно свойство за него със стойността alpha(Opacity=X), където X може да варира от 0 до 100.

CSS свойство opacity отговаря за прозрачността на елементите (картинки, текст, блокове) в 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 "

Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась.

В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам добиться одинакового результата во всех браузерах с минимальными трудозатратами.

Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.

Старый подход

В старых версиях Firefox и Safari необходимо применять свойство следующим образом:

#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }

Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно, кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x, что, конечно, маловероятно.

В следующей строке используется свойство -moz-opacity , которое работало на очень ранних версиях движка Mozilla. Firefox прекратил его поддержку в версии 0.9.

CSS прозрачность в Firefox, Safari, Chrome и Opera

Для большинства современных браузеров достаточно использовать следующее свойство:

#myElement { opacity: .7; }

В приведённом примере, элементу устанавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим значение в единицу, то элемент будет непрозрачным, и, соответственно, установка этого значения в ноль, сделает его невидимым.

Свойством opacity обрабатывается 2 десятичных цифры. То есть значение ".01" будет отличаться от значения ".02", хоть это и мало заметно.

CSS прозрачность для Internet Explorer

Как обычно, Internet Explorer не дружит с остальными браузерами. К тому же у нас сейчас в довольно широком использовании три версии этого браузера, установка прозрачности в каждой из которых различна и иногда требует дополнительных усилий для получения положительного результата.

#myElement { filter: alpha(opacity=40); }

В этом примере используется свойство filter , которое работает в версиях 6-8, однако для версий 6 и 7 есть одно ограничение: у элемента свойство hasLayout должно быть установлено в true . Это свойство присутствует только в IE и подробнее о нём можно почитать, например, на Хабре .

Ещё один способ установить прозрачность используя CSS в IE8 - это использовать следующий подход (обратите внимание на комментарии):

#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* работает в IE6, IE7 и IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* только для IE8 */ }

Первая строка будет работать во всех сейчас используемых версиях, вторая же - только в IE8. Обратите внимание, что во второй строке используется префикс -ms- , а значение взято в кавычки.

Установка и изменение CSS прозрачности с помощью JavaScript или jQuery

Вы можете использовать следующий код для установки прозрачности:

Document.getElementById("myElement").style.opacity = ".4"; // для большинства браузеров document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE

Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:

$("#myElement").css({ opacity: .4 }); // работает во всех браузерах

Вы можете анимировать это свойство:

$("#myElement").animate({ opacity: .4 }, 1000, function() { // Анимация завершена; этот код работает во всех браузерах. });

Функция RGBA

В CSS3 планируется поддержка альфа-канала с помощью функции rgba . Эта функция работает в Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Используется она так:

#rgba { background: rgba(98, 135, 167, .4); }

В этом случае последний параметр указывает на уровень непрозрачности.

Функция HSLA

Подобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA , параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).

#hsla { background: hsla(207, 38%, 47%, .4); }

Важный момент при использовании функций rgba и hsla - это то, что установка прозрачности не применяется к дочерним элементам, тогда как использование свойства opacity - наследуется.

Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.

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

Прозрачност в IE

Internet Explorer не поддържа свойства непрозрачностдо деветата версия обаче има собствен филтър, с който можете да зададете степента на прозрачност:

филтър: алфа (непрозрачност=50)

Смисъл непрозрачностза браузър Internet Explorer филтърът може да варира от 0 - напълно прозрачен 100 - непрозрачен

Блоковете на това меню ще бъдат полупрозрачни при задържане на курсора и в IE!!

У дома
Карта на сайта
Купете си слон
Продавам слон
Наемете слон

Префикси.

По принцип това може да е краят на главата за прозрачността, но бих искал да ви разкажа и за т.нар. префикси на доставчици.. тези другари нямат специална връзка с тази глава, но докато напредвате в изучаването на CSS3, те ще се появяват все по-често и трябва да говорите за тях някъде - така че ще ви кажа тук.

И така, префиксите на доставчици са специални префикси на CSS свойства, използвани от браузърите за експериментални свойства, които не са официално включени в CSS спецификацията.

Спомняме си, че спецификацията на CSS 3 все още е в процес на разработка и формално свойствата, описани в този урок, не съществуват в природата, но браузърите вече активно ги използват на собствена опасност и риск.

Защо на свой риск? Да, защото има възможност, когато CSS 3 спецификацията бъде официално одобрена, свойствата, описани в нея, да се различават по ефект от свойствата със същото име, които вече се използват от браузърите. Е, нека се побъркаме и оставим разработчиците на спецификацията CSS 3 да определят собствеността непрозрачностне като степента на прозрачност на блока, а например като неговото засенчване или трептене (разбира се, че пиша глупости), което след това ще бъде показано от милиони инсталирани браузъриза което непрозрачностТова прозрачност ли е?

Или да кажем, че разработчиците на браузъра са измислили свое собствено свойство - иновация, която никой друг няма никъде, но документ с такова свойство не преминава проверката за валидност, защото такова свойство не е в спецификацията.

Поради тези и други причини браузърите префиксират свойства, които не са част от официалната спецификация. Всеки браузър има свой собствен префикс, започващ със знака „-“, този знак в началото на свойството, както и този знак „_“, според спецификацията на CSS 2.1, означава, че свойството е запазено за CSS разширения на определени браузъри.

Ето най-популярните браузъри и техните префикси:

Браузър	Префикс
Опера	-о-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 и по-нова версия	-Госпожица-
Safari до версия 3, Konqueror	-khtml-
Safari 3 и по-нова версия, Google Chrome	-webkit-

Използването на префикси е много лесно; просто вземете всяко CSS свойство и заменете желания префикс към него, например към свойството непрозрачностзаместител -moz-Оказва се: -moz-непрозрачност

Въпреки че всъщност моят израз " използвайте префикси"грешно! всъщност никъде нищо не се замества, просто има свойство непрозрачност, е там -moz-непрозрачности това са две различни свойства, които не е задължително да изпълняват една и съща функция!! - това трябва да се разбере..

Трябва също така да разберете, че определени специфични браузъри, до определени версии, могат да поддържат CSS свойства само със собствените си префикси (отново се изразявам неправилно, правилно е да кажем вашите собствени свойства - CSS разширения на браузъра) и първоначално могат да разчитат по спецификации, дори и да се разработват. – В този учебник ще разгледаме всеки конкретен случай поотделно.

По отношение на тази глава за прозрачността трябва да се отбележи, че Браузър Firefox 3,5 и повече ранни версииизползват собствената си собственост -moz-непрозрачност, А Браузър Safariдо версия 1.1 използва собствено свойство -khtml-непрозрачност .

И така, за да направим нашия пример напълно съвместим с различни браузъри, трябва да добавим още няколко реда към кода:

Както можете да видите, префиксите значително разтягат кода и използването им не винаги е оправдано, ако версиите на браузърите, които искат да работят с определени свойства само с техните префикси, са доста стари, какъвто е случаят със свойството непрозрачност, тогава не е нужно да ги посочвате.. – въпреки че, разбира се, това е лош съвет..

Е, сега няколко полезни съвета...

Винаги използвайте префикси (освен ако, разбира се, определен браузър не може без тях) в случаите, когато използваното свойство може значително да повлияе на производителността, четливостта и използваемостта на сайта. Едно е, когато някои дреболии в дизайна на сайта не работят, а съвсем друго е, когато например менюто на сайта не работи или е невъзможно да се прочете текстът на сайта поради факта, че браузърът не t поддържа някакво свойство и вместо това използва подобно собствено.

проблеми