Det er tre måter å endre gjennomsiktigheten til et element i CSS:
ved å bruke opacitetsegenskapen,
ved å bruke rgba()-funksjonen,
ved å bruke hsla()-funksjonen.

1. Opasitet egenskap

Opacity-egenskapen lar deg gjøre et hvilket som helst element på en nettside delvis eller helt gjennomsiktig. Denne egenskapen endrer gjennomsiktigheten av elementer som bakgrunnsbilde(bilde) eller bakgrunnen er satt med en farge eller gradient. Hvis et element som har opacitetsegenskapen brukt inneholder andre elementer i seg, vil de også endre gjennomsiktigheten.
Opacitetsegenskapen godtar verdier fra 0 (helt gjennomsiktig) til 1 (ugjennomsiktig), for eksempel:

H1 (farge: #CD6829;) div (bakgrunn: #CDD6DB; opasitet: .3; )
Ris. 1. Gjennomsiktighet av elementer ved hjelp av opasitet

2. rgba() funksjon

RGBA-fargemodellen skaper en fargetone ved å blande i de nødvendige proporsjonene rød, grønn Og blå blomster, og alfakanal (alfa) er ansvarlig for graden av fargegjennomsiktighet. I motsetning til opacity-egenskapen, for en blokk som inneholder andre elementer, vil rgba()-funksjonen endre opasiteten til bare blokken.

Ris. 2. RGB fargemodell h1 (farge: #CD6829;) div (bakgrunn: rgba(205, 214, 219, 0.3);)
Ris. 3. Gjennomsiktighet av elementer ved hjelp av funksjonen rgba().

3. Funksjon hsla()

Funksjonen hsla() hvis parametere betyr tone (nyanse), metning, lysstyrke Og alfakanal (alfa), lar deg også angi en gjennomskinnelig farge.

Fargenyanser angis som prosenter ved å bruke den tilsvarende verdien fra fargehjulet. Selve sirkelen er delt inn i sektorer, på grensene som det er primærfarger:

0/360° - rød
60° - gul
120° - grønn farge
180° - blå farge
240° - blå farge
270° - lilla farge
300° - lilla farge.

For å få svart, må du sette verdiene for fargetone, metning og lysstyrke til null - hsla(0, 0%, 0%, 1) . Hvit farge oppnås ved 100 % lysstyrkeverdi hsla(0, 0 %, 100 %, 1) , og grå— ved null metningsverdi hsla(0, 0%, 50%, 1) .

Vlad Merzhevich

Effekten av gjennomskinnelighet av et element er tydelig synlig i bakgrunnsbildet og har blitt utbredt i forskjellige operativsystemer fordi det ser stilig og vakkert ut. I webdesign brukes også gjennomskinnelighet og oppnås gjennom opacitetsegenskapen eller RGBA-fargeformatet som er satt for bakgrunnen.

Gradientblokk

Lag blokken vist i fig. 1. Blokken inneholder en gjennomskinnelig gradientramme med en gradientbakgrunn under tittelen og en liten peker. Bakgrunnen på siden er kun gitt for klarhet i gjennomskinnelighetseffekten. Du kan angi et hvilket som helst eget bilde. Minste blokkhøyde er 100px.

Hvordan lage et lag semi-transparent?

For å endre graden av gjennomsiktighet til et element, bruk opacitetsstilegenskapen med en verdi fra 0 til 1, der 0 tilsvarer full gjennomsiktighet, og 1, tvert imot, til objektets opasitet. I nettleseren Internet Explorer Denne egenskapen fungerer ikke, så du må bruke filter spesifikt for den, en egenskap som ikke er en del av CSS-spesifikasjonen. Eksempel 1 viser hvordan du angir lagtransparens for alle nettlesere.

Gjennomsiktig bakgrunn

Vlad Merzhevich

Delvis åpenhet, når den brukes riktig, ser veldig imponerende ut i nettsteddesign. Det viktigste er at under de gjennomskinnelige blokkene er det ikke en monokromatisk design, men et bilde er det i dette tilfellet at gjennomsiktighet blir merkbar. Denne effekten oppnås på mange måter, og hvis du husker alt, inkludert de gammeldagse metodene, er det å bruke et PNG-bilde som bakgrunn, og lage et rutete bilde og opacitetsegenskapen. Men så snart behovet oppstår for å lage en gjennomskinnelig bakgrunn i en blokk, har disse metodene en ubehagelig ulempe. Jeg skal lage en kort anmeldelse for å gjøre det klart hva vi snakker om, så vel som for de leserne som ikke er kjent med utradisjonelle alternativer for å skape en gjennomskinnelig effekt.

Hvordan sette en tabell til å være gjennomsiktig, men noen celler er ikke det?

For å endre gjennomsiktigheten til et element, gir CSS3 opacitetsegenskapen dens verdi kan variere fra 0 til 1. Null tilsvarer full gjennomsiktighet for elementet, og en, tvert imot, opasitet. Moderne nettlesere fungerer ganske korrekt med denne egenskapen med unntak av Nettleser Utforsker, så du må bruke en spesiell filteregenskap for den med verdien alpha(Opacity=X) , hvor X kan variere fra 0 til 100.

CSS-eiendom opacity er ansvarlig for gjennomsiktigheten av elementer (bilder, tekst, blokker) i html.

Syntaks CSS opasitet

opasitet: verdi;

Hvor verdien kan ta reelle verdier i området fra 0,0 til 1,0. En verdi på 1,0 betyr ingen åpenhet (standard).

Eksempler: som åpenhet i html

Eksempel nr. 1. Gjennomsiktig bilde i html

Det første bildet vises uten gjennomsiktighet, det andre med gjennomsiktighet 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 применённого к картинке будет значить что данное изображение должно быть полупрозрачным.

Åpenhet i IE

Internet Explorer støtter ikke egenskaper opasitet opp til den niende versjonen har den imidlertid sitt eget filter som du kan stille inn graden av gjennomsiktighet med:

filter: alpha(opasitet=50)

Betydning opasitet for Internet Explorer-nettleserfilteret kan variere fra 0 - helt gjennomsiktig 100 - ugjennomsiktig

Blokkene i denne menyen vil også være gjennomsiktige ved sveving i IE!!

Hjem
Områdekart
Kjøp en elefant
Selg en elefant
Lei en elefant

Prefikser.

I prinsippet kan dette være slutten på kapittelet om åpenhet, men jeg vil også fortelle om den s.k. leverandørprefikser.. disse kameratene har ingen spesiell relasjon til dette kapittelet, men etter hvert som du går videre med å lære CSS3, vil de dukke opp oftere og oftere, og du må snakke om dem et sted - så jeg skal fortelle deg det her.

Så leverandørprefikser er spesielle CSS-egenskapsprefikser som brukes av nettlesere for eksperimentelle egenskaper som ikke er offisielt inkludert i CSS-spesifikasjonen.

Vi husker at CSS 3-spesifikasjonen fortsatt er under utvikling, og formelt eksisterer ikke egenskapene beskrevet i denne opplæringen i naturen, men nettlesere bruker dem allerede aktivt på egen risiko og risiko.

Hvorfor på egen risiko? Ja, fordi det er en mulighet for at når CSS 3-spesifikasjonen er offisielt godkjent, vil egenskapene beskrevet i den avvike fra egenskaper med samme navn som allerede brukes av nettlesere. Vel, la oss bli gale og la utviklerne av CSS 3-spesifikasjonen utpeke eiendommen opasitet ikke som graden av gjennomsiktighet av blokken, men for eksempel som skyggelegging eller flimring (selvfølgelig skriver jeg tull), som da vil vises av millioner installerte nettlesere for hvilket opasitet Er dette åpenhet?

Eller la oss si at nettleserutviklere kom opp med sin egen eiendom - en innovasjon som ingen andre har noe sted, men et dokument med en slik egenskap består ikke gyldighetskontrollen fordi en slik egenskap ikke er i spesifikasjonen.

Av disse og andre grunner prefikser nettlesere egenskaper som ikke er en del av den offisielle spesifikasjonen. Hver nettleser har sitt eget prefiks som starter med "-"-tegnet, dette tegnet i begynnelsen av egenskapen, samt dette "_"-tegnet, i henhold til CSS 2.1-spesifikasjonen, betyr at eiendommen er reservert for CSS-utvidelser av visse nettlesere.

Her er de mest populære nettleserne og deres prefikser:

Nettleser	Prefiks
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 og nyere	-ms-
Safari opp til versjon 3, Konqueror	-khtml-
Safari 3 og nyere, Google Chrome	-webkit-

Det er veldig enkelt å bruke prefikser, bare ta en hvilken som helst CSS-egenskap og erstatte den med ønsket prefiks, for eksempel til egenskapen opasitet erstatte -moz- det viser seg: -moz-opasitet

Selv om mitt uttrykk faktisk " bruk prefikser"feil! faktisk er ingenting erstattet hvor som helst, det er bare en eiendom opasitet, men det er det -moz-opasitet og dette er to forskjellige egenskaper som ikke nødvendigvis trenger å utføre samme funksjon!! - Dette bør forstås..

Du bør også forstå at visse spesifikke nettlesere, opp til visse versjoner, bare kan støtte CSS-egenskaper med sine egne prefikser (igjen, jeg uttrykker meg feil, det er riktig å si dine egne egenskaper - nettleser-CSS-utvidelser), og kan i utgangspunktet stole på på spesifikasjoner, selv om de er under utvikling. – Vi vil vurdere hvert enkelt tilfelle separat i denne læreboken.

Når det gjelder dette kapittelet om åpenhet, bør det bemerkes at Firefox nettleser 3,5 og mer tidlige versjoner bruke sin egen eiendom -moz-opasitet, A Safari-nettleseren opp til versjon 1.1 bruker sin egen eiendom -khtml-opasitet .

Så, for å gjøre eksemplet vårt fullstendig kryss-nettleserkompatibelt, må vi legge til et par linjer til i koden:

Som du kan se, strekker prefikser koden betydelig, og bruken av dem er ikke alltid rettferdiggjort hvis versjonene av nettlesere som ønsker å jobbe med visse egenskaper kun ved å bruke prefiksene, er ganske gamle, slik tilfellet er med egenskapen opasitet, da trenger du ikke å angi dem.. – selv om dette selvfølgelig er et dårlig råd..

Vel, nå noen nyttige tips...

Bruk alltid prefikser (med mindre, selvfølgelig, en bestemt nettleser ikke kan klare seg uten dem) i tilfeller der egenskapen som brukes i stor grad kan påvirke ytelsen, lesbarheten og brukervennligheten til nettstedet. Det er én ting når små ting i nettstedets design ikke fungerer, og en helt annen ting når for eksempel nettstedsmenyen ikke fungerer eller det er umulig å lese teksten på nettstedet fordi nettleseren ikke støtter noen egenskaper og bruker i stedet en lignende av sine egne.

Problemer