Postoje tri načina da promijenite transparentnost elementa u CSS-u:
koristeći svojstvo neprozirnosti,
koristeći rgba() funkciju,
koristeći funkciju hsla().

1. Svojstvo neprozirnosti

Svojstvo neprozirnosti omogućava vam da bilo koji element web stranice učinite djelomično ili potpuno transparentnim. Ovo svojstvo mijenja transparentnost elemenata za koje pozadinska slika(slika) ili je pozadina postavljena pomoću boje ili gradijenta. Ako element koji ima primijenjeno svojstvo neprozirnosti sadrži druge elemente unutar sebe, oni će također promijeniti svoju transparentnost.
Svojstvo neprozirnosti prihvata vrijednosti u rasponu od 0 (potpuno transparentan) do 1 (neproziran), na primjer:

H1 (boja: #CD6829;) div (pozadina: #CDD6DB; neprozirnost: .3; )
Rice. 1. Transparentnost elemenata pomoću neprozirnosti

2. rgba() funkcija

RGBA model boja stvara ton boje miješanjem u potrebnim proporcijama crvena, zeleno I plava cveće i alfa kanal (Alpha) odgovoran je za stepen transparentnosti boje. Za razliku od svojstva neprozirnosti, za blok koji sadrži druge elemente, funkcija rgba() će promijeniti neprozirnost samo bloka.

Rice. 2. RGB model boja h1 (boja: #CD6829;) div (pozadina: rgba(205, 214, 219, 0.3);)
Rice. 3. Transparentnost elemenata pomoću funkcije rgba().

3. Funkcija hsla()

Funkcija hsla() čiji parametri znače ton (Nijansa), saturation, osvetljenost I alfa kanal (Alpha), takođe vam omogućava da postavite prozirnu boju.

Nijanse boja su specificirane kao postoci koristeći odgovarajuću vrijednost iz kotača boja. Sam krug je podijeljen na sektore, na čijim se granicama nalaze primarne boje:

0/360° - crveno
60° - žuta
120° - zelena boja
180° - plava boja
240° - plava boja
270° - ljubičasta boja
300° - ljubičasta boja.

Da biste dobili crnu, morate postaviti vrijednosti nijanse, zasićenosti i svjetline na nulu - hsla(0, 0%, 0%, 1) . Bijela boja se dobija pri 100% vrijednosti svjetline hsla(0, 0%, 100%, 1) i siva— pri nultoj vrijednosti zasićenja hsla(0, 0%, 50%, 1) .

Vlad Merzhevich

Efekat prozirnosti elementa jasno je vidljiv na pozadinskoj slici i postao je raširen u različitim operativni sistemi jer izgleda elegantno i lijepo. U web dizajnu se također koristi prozirnost koja se postiže kroz svojstvo neprozirnosti ili RGBA format boje koji je postavljen za pozadinu.

Gradijentni blok

Napravite blok prikazan na sl. 1. Blok sadrži prozirni okvir s gradijentom sa pozadinom s gradijentom ispod naslova i malim pokazivačem. Pozadina na stranici je data samo radi jasnoće efekta prozračnosti, možete naznačiti bilo koju svoju sliku. Minimalna visina bloka je 100px.

Kako napraviti sloj poluprovidnim?

Da biste promijenili stepen transparentnosti elementa, koristite svojstvo stila neprozirnosti sa vrijednošću od 0 do 1, gdje 0 odgovara punoj transparentnosti, a 1, naprotiv, neprozirnosti objekta. U pretraživaču Internet Explorer Ovo svojstvo ne radi, tako da morate koristiti filter posebno za njega, svojstvo koje nije dio CSS specifikacije. Primjer 1 pokazuje kako postaviti transparentnost sloja za sve pretraživače.

Translucent background

Vlad Merzhevich

Djelomična transparentnost, kada se pravilno koristi, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da ispod prozirnih blokova ne postoji monokromatski dizajn, već slika u ovom slučaju postaje vidljiva. Ovaj efekat se može postići na različite načine, uključujući staromodne metode korišćenja PNG slike kao pozadine, kreiranje karirane slike i korišćenje svojstva neprozirnosti. Ali čim se pojavi potreba da se napravi prozirna pozadina u bloku, ove metode imaju neugodnu lošu stranu. Napravit ću kratku recenziju da bude jasno o čemu govorimo, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje prozirnog efekta.

Kako podesiti da tabela bude prozirna, a neke ćelije nisu?

Za promjenu transparentnosti elementa, CSS3 obezbjeđuje svojstvo neprozirnosti, njegova vrijednost može varirati od 0 do 1. Nula odgovara punoj transparentnosti elementa, a jedan, naprotiv, neprozirnosti. Moderni pretraživači rade sasvim korektno sa ovim svojstvom sa izuzetkom Internet pretraživač Explorer, tako da morate koristiti posebno svojstvo filtera za njega sa vrijednošću alpha(Opacity=X) , gdje X može varirati od 0 do 100.

CSS svojstvo opacity je odgovoran za transparentnost elemenata (slike, tekst, blokovi) u html-u.

Sintaksa CSS neprozirnost

neprozirnost: vrijednost;

Gdje vrijednost može poprimiti stvarne vrijednosti u rasponu od 0,0 do 1,0. Vrijednost 1,0 znači da nema transparentnosti (podrazumevano).

Primjeri: kao što je transparentnost u html-u

Primjer br. 1. Transparentna slika u html-u

Prva slika se prikazuje bez prozirnosti, druga sa prozirnošću 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 применённого к картинке будет значить что данное изображение должно быть полупрозрачным.

Transparentnost u IE

Internet Explorer ne podržava svojstva neprozirnost do devete verzije, međutim, ima svoj filter pomoću kojeg možete podesiti stepen transparentnosti:

filter: alfa (prozirnost=50)

Značenje neprozirnost filter pretraživača Internet Explorer može se razlikovati od 0 - potpuno transparentan 100 - neproziran

Blokovi ovog menija će takođe biti providni kada lebdite u IE!!

Dom
Mapa sajta
Kupi slona
Prodaj slona
Iznajmite slona

Prefiksi.

U principu, ovo bi mogao biti kraj poglavlja o transparentnosti, ali bih vam rekao i o tzv. prefiksi dobavljača.. ovi drugovi nemaju nikakve posebne veze sa ovim poglavljem, međutim, kako budete napredovali u učenju CSS3, oni će se sve češće pojavljivati ​​i o njima treba negdje pričati - pa ću vam reći ovdje.

Dakle, prefiksi dobavljača su posebni prefiksi CSS svojstava koje koriste pretraživači za eksperimentalna svojstva koja nisu službeno uključena u CSS specifikaciju.

Sjećamo se da je CSS 3 specifikacija još uvijek u razvoju i formalno svojstva opisana u ovom vodiču ne postoje u prirodi, ali ih pretraživači već aktivno koriste na vlastitu odgovornost i rizik.

Zašto na vlastitu odgovornost? Da, jer postoji mogućnost da će se, kada specifikacija CSS 3 službeno odobri, svojstva opisana u njoj razlikovati po svom učinku od svojstava s istim imenom koja već koriste pretraživači. Pa, hajde da poludimo i pustimo programere CSS 3 specifikacije da odrede svojstvo neprozirnost ne kao stepen transparentnosti bloka, već npr. kao njegovo senčenje ili treperenje (naravno da pišem gluposti), što će onda biti prikazano milionima instalirani pretraživači za koje neprozirnost Je li ovo transparentnost?

Ili recimo da su programeri pretraživača osmislili svoje svojstvo - inovaciju koju niko nigdje nema, ali dokument s takvim svojstvom ne prolazi provjeru valjanosti jer takvo svojstvo nije u specifikaciji.

Iz ovih i drugih razloga, pretraživači imaju prefiks svojstva koja nisu dio službene specifikacije. Svaki pretraživač ima svoj prefiks koji počinje znakom "-", ovaj znak na početku svojstva, kao i ovaj znak "_", prema CSS 2.1 specifikaciji, znači da je svojstvo rezervirano za CSS ekstenzije određenih pretraživači.

Evo najpopularnijih pretraživača i njihovih prefiksa:

Browser	Prefiks
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 i noviji	-ms-
Safari do verzije 3, Konqueror	-khtml-
Safari 3 i noviji, Google Chrome	-webkit-

Vrlo je lako koristiti prefikse samo uzmite bilo koje CSS svojstvo i zamijenite ga željenim prefiksom, na primjer svojstvu neprozirnost zamjena -moz- ispada: -moz-opacity

Iako je u stvari moj izraz “ koristiti prefikse"pogrešno! u stvari, nigde ništa nije zamenjeno, jednostavno postoji svojstvo neprozirnost, ali postoji -moz-opacity a ovo su dva različita svojstva koja ne moraju nužno obavljati istu funkciju!! - ovo treba shvatiti..

Također treba da shvatite da određeni specifični pretraživači, do određenih verzija, mogu podržati CSS svojstva samo sa svojim vlastitim prefiksima (opet se netočno izražavam, ispravno je reći vaša vlastita svojstva - CSS ekstenzije pretraživača), te se u početku mogu osloniti na specifikacijama, čak i ako se one razvijaju. – Svaki konkretan slučaj ćemo posebno razmatrati u ovom udžbeniku.

Što se tiče ovog poglavlja o transparentnosti, treba napomenuti da Firefox pretraživač 3.5 i više rane verzije koriste svoju imovinu -moz-opacity, A Safari pretraživač do verzije 1.1 koristi vlastito svojstvo -khtml-neprozirnost .

Dakle, kako bismo naš primjer učinili potpuno kompatibilnim s više pretraživača, moramo dodati još nekoliko redaka u kod:

Kao što vidite, prefiksi značajno rastežu kod i njihova upotreba nije uvijek opravdana ako su verzije pretraživača koji žele raditi sa određenim svojstvima samo koristeći svoje prefikse prilično stare, kao što je slučaj sa svojstvom neprozirnost, onda ih ne morate naznačiti.. – iako je ovo, naravno, loš savjet..

Pa, sad nekoliko korisnih savjeta...

Uvijek koristite prefikse (osim ako, naravno, određeni pretraživač ne može bez njih) u slučajevima kada korišteno svojstvo može uvelike utjecati na performanse, čitljivost i upotrebljivost stranice. Jedna je stvar kada sitnice u dizajnu sajta ne rade, a sasvim druga stvar kada, na primer, meni sajta ne radi ili je nemoguće pročitati tekst na sajtu jer pretraživač ne podržava neka svojstva i umjesto toga koristi sličan vlastiti.

Problemi