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

Степента на прозрачност на елемента се определя от стойността от 0 преди 1 където 0 - напълно прозрачен 1 - изобщо непрозрачен .. Например стойността 0.5 Имоти непрозрачностприложен към изображението ще означава, че това изображение трябва да е полупрозрачно.

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

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

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

Значение непрозрачностза филтър интернет браузър 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-непрозрачност .

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

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

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

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

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

1. Свойството непрозрачност

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

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

2. Функция RGB().

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

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

3. функция hsl().

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

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

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

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

CSS3 дефинира свойството opacity за прилагане на прозрачен ефект към елементите на страницата. Стойността на това свойство е число между 0,0 и 1,0. Стойност нула прави елемента напълно прозрачен, докато стойност 1 го прави напълно непрозрачен. Свойството може да се приложи към всеки елемент на страницата.

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 използва непрозрачност на CSS3 от версия 1.2, но Konqueror, по-стара от версия 3.1, след като спря да поддържа -khtml-opacity, не въведе поддръжка за непрозрачност на CSS3.

Internet Explorer от версия 5.5 до най-новата днес Интернет версия 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"] || elem.filters.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) върне "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+ връща "филтър"; връща невярно; // без прозрачност )

Задача

Направете блоков елемент с полупрозрачно цялото му съдържание.

Решение

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

Пример 1. Полупрозрачен слой

HTML5 CSS 2.1 IE Cr Op Sa Fx

Резултат този примерпоказано на фиг. един.

Ориз. 1. Полупрозрачен слой в браузъра Safari

Свойството филтър добавя прозрачност само към тези елементи, където е зададен поне един от размерите (ширина или височина) или елементът е зададен на абсолютно позициониране(позиция: абсолютна).

Също така имайте предвид, че прозрачността засяга цялото съдържание на слоя, включително дъщерните елементи, и няма да можете да увеличите нивото на непрозрачност за тях чрез промяна на непрозрачността. В пример 1, където прозрачността на слоя е зададена на 0,7, текстът вътре в слоя получава същата стойност. Допустимо е да се зададе по-малко, но текстът не може да надвишава стойността на прозрачност от 0,7.

Свойството opacity на CSS отговаря за прозрачността на елементите (изображения, текст, блокове) в html.

Синтаксис на CSS

Където стойността може да приема реални стойности в диапазона от 0,0 до 1,0. Стойност 1,0 означава липса на прозрачност (по подразбиране).

Пример #1. прозрачно изображение в html

Първото изображение се изобразява без прозрачност, второто с 0,5 прозрачност.

Прозрачност на елемента

Направете изображението полупрозрачно при задържане!

Източници за демоизтегляне

Благодаря за вниманието!

Следваща статия
Как да създадете div с възможност за превъртане?