/* 06.07.2006 */

CSS мөлдірлігі (css мөлдірлігі, JavaScript ашықтығы)

Мөлдірлік әсері - осы мақаланың тақырыбы. CSS немесе Javascript көмегімен html бет элементтерін қалай мөлдір ету керектігін және Firefox браузерлерін ескере отырып, кросс-шолғышқа (әртүрлі браузерлерде бірдей жұмыс) қалай қол жеткізуге болатынын білгіңіз келсе, Internet Explorer, Opera, Safari, Konqueror, онда қош келдіңіз. Бұған қоса, JavaScript көмегімен мөлдірлікті біртіндеп өзгертуге арналған дайын шешімді қарастырыңыз.

CSS мөлдірлігі (CSS мөлдірлігі)

CSS бұлыңғырлық симбиозы

Симбиоз дегенде мен әртүрлі стильдерді біріктіруді айтамын әртүрлі браузерлерқалаған әсерді алу үшін бір CSS ережесінде, яғни. кросс-браузерді жүзеге асыру үшін.

Сүзгі:progid:DXImageTransform.Microsoft.Alpha(мөлдірлік=50); /* IE 5,5+*/ -moz-мөлдірлік: 0,5; /* Mozilla 1.6 және одан төмен */ -khtml-мөлдірлік: 0,5; /* Konqueror 3.1, Safari 1.1 *//* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

Шын мәнінде, бірінші және соңғы ережелер IE5.5+ және CSS3 мөлдірлігін түсінетін браузерлер үшін қажет, ал ортадағы екі ереже ешбір айырмашылықты жасамайды, бірақ шынымен де араласпайды (өзіңіз шешіңіз бе? сізге олар керек).

Javascript мөлдірлік симбиозы

Енді жоғарыда сипатталған әртүрлі браузерлердің мүмкіндіктерін ескере отырып, мөлдірлікті сценарий арқылы орнатуға тырысайық.

setElementOpacity(sElemId, nOpacity) функциясы ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); егер (!elem || !opacityProp) қайтарады; // Егер көрсетілген идентификаторы бар элемент болмаса немесе шолғыш мөлдірлікті басқару функциясына белгілі әдістердің ешқайсысын қолдамасаегер (opacityProp=="сүзгі") // 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+")"; // Басқа сүзгілерді қайта жазбау үшін "+=" пайдаланыңыз.) басқа // Басқа браузерлер elem.style = nOpacity; ) getOpacityProperty() функциясы ( егер (document.body.style.opacity түрі == "жол") // CSS3 үйлесімді (Moz 1.7+, Safari 1.2+, Opera 9)«мөлдірлікті» қайтару; басқа болса (document.body.style.MozOpacity түрі == «жол») // Mozilla 1.6 және одан бұрынғы нұсқасы, Firefox 0.8«MozOpacity» қайтару; else if (document.body.style.KhtmlOpacity == "жол") // Konqueror 3.1, Safari 1.1 қайтаратыны "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ "сүзгіні" қайтарады; жалған қайтару; //мөлдірлік жоқ }

Функция екі аргументті қабылдайды: sElemId - элемент идентификаторы, nOpacity - нақты сан 0,0-ден 1,0-ге дейін CSS3 мөлдірлік мөлдірлігін орнату.

setElementOpacity функциясы кодының IE бөлігін түсіндіру керек деп ойлаймын.

VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";

Сұрақ туындауы мүмкін, неге elem.style.filter = «...» сипатына (=) тағайындау арқылы мөлдірлікті орнатуға болмайды; ? Неліктен жолдың соңына сүзгі сипатын қосу үшін «+=» пайдалану керек? Жауап қарапайым, басқа сүзгілерді «үстіне жазбау» үшін. Бірақ сонымен бірге сүзгіні осылай екінші рет қоссаңыз, ол осы сүзгінің бұрын орнатылған мәндерін өзгертпейді, жай ғана сипат жолының соңына қосылады, бұл дұрыс емес. Сондықтан, егер сүзгі орнатылған болса, оны элементке қолданылатын сүзгілер жинағы арқылы өңдеу керек: elem.filters (бірақ сүзгі элементке әлі тағайындалмаған болса, оны басқару мүмкін емес екенін ескеріңіз. оны осы жинақ арқылы). Жинақ элементтеріне сүзгі аты немесе индекс арқылы қол жеткізуге болады. Дегенмен, сүзгіні екі стильде көрсетуге болады, қысқа IE4 стилі немесе кодта ескерілетін IE5.5+ стилі.

Элементтің мөлдірлігін біркелкі өзгертіңіз

Дайын шешім. opacity.js кітапханасын пайдалану

fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/strawberry.jpg" ені="100" биіктігі="80" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/tomato.jpg" ені="82" биіктігі="100" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/sweet_cherry.jpg" ені="98" биіктігі="97" />

Негізгі қадамдар:

1. Біз функциялар кітапханасын қосамыз;
2. Әдістің көмегімен ережелерді анықтаңыз fadeOpacity.addRule();
3. Біз әдіс деп атаймыз fadeOpacity()мөлдірлікті бастапқы мәннен соңғы мәнге өзгерту үшін немесе fadeOpacity.back()мөлдірлік деңгейінің бастапқы мәніне оралу үшін.

Шайнау

Кітапхананы қалай қосуға болады, менің ойымша, жоғарыдағы мысалдан көруге болады. Енді ережелердің анықтамасын түсіндірген жөн. Әдістерді шақырмас бұрын тегіс өзгерісмөлдірлік үшін процестің орындалатын ережелерін анықтау қажет: бастапқы және соңғы мөлдірлікті анықтау керек және қажет болса, мөлдірлікті өзгерту процесінің жылдамдығына әсер ететін кідіріс параметрін көрсету керек.

Ережелер әдіс арқылы анықталады fadeOpacity.addRule

Синтаксис: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Аргументтер:

• sRuleName – ереже аты, ерікті түрде орнатылады;
• nStartOpacity және nFinishOpacity – басталу және аяқталу мөлдірлігі, 0,0-ден 1,0-ге дейінгі диапазондағы сандар ;
• nDelay – миллисекундтағы кідіріс (міндетті емес аргумент, әдепкі – 30).

Біз мөлдірлікті өшіретін шақыруды fadeOpacity(sElemId, sRuleName) әдістері арқылы жасаймыз, мұнда sElemId элемент идентификаторы және sRuleName ереже атауы болып табылады. Мөлдірлікті қайтару үшін бастапқы күй fadeOpacity.back(sElemId) әдісі пайдаланылады.

:мөлдірлікті қарапайым өзгерту үшін меңзерді апарыңыз

Сондай-ақ, мөлдірлікті қарапайым өзгерту үшін (бірақ бірте-бірте өзгерту емес) псевдоселектордың дұрыс екенін ескеремін. : меңзерді апарыңыз, ол тінтуірді оның үстіне апарған кезде элементтің мәнерлерін анықтауға мүмкіндік береді.

Кескін A элементінің ішіне орналастырылғанын ескеріңіз.Мәселен, Internet Explorer 6 нұсқасына дейін :hover псевдоселекторын түсінеді, тек CSS-те болуы керек сияқты кез келген элементке емес, сілтемелерге қолданылады (IE7-де жағдай түзетілді).

IE-дегі мөлдірлік және кесілген мәтін

Windows XP шығарылымымен экран қаріптерінің антиалиазинг әдісі арқылы пайда болды анық түрі, және онымен осы антиалиазинг әдісін пайдаланған кезде IE-дегі жанама әсерлер. Біздің жағдайға қатысты, егер ClearType антиалиасинг әдісі қосылған мәтіні бар элементке мөлдірлік қолданылса, мәтін қалыпты түрде көрсетілуін тоқтатады (қалың мәтін - батыл, мысалы, қосарланған, әртүрлі артефактілер де пайда болуы мүмкін, мысалы, сызықша, қиыршық мәтін түрінде). Жағдайды түзету үшін IE үшін фон түсін, CSS сипатын орнату керек фон түсіМөлдірлік қолданылатын элемент. Бақытымызға орай, IE7 қатені түзетті.

Бұл сабақта біз осыларды қарастырамыз cssқасиеттері - мөлдірлікжәне RGBA. Меншік Мөлдірлікэлементтердің мөлдірлігі мен функциясына ғана жауап береді RGBA- түс пен мөлдірлік үшін, егер сіз альфа арнасының мөлдірлік мәнін көрсетсеңіз.

CSS мөлдірлігі

үшін сандық мән мөлдірлік 0,0-ден 1,0-ге дейінгі диапазонда орнатылады, мұнда нөл - толық мөлдірлік, ал біреуі, керісінше, абсолютті мөлдірлік. Мысалы, 50% мөлдірлікті көру үшін мәнді 0,5 мәніне орнату керек. Соны ескеру керек мөлдірліката-ананың барлық еншілес элементтеріне таратады. Бұл мөлдір фондағы мәтін де мөлдір болады дегенді білдіреді. Бұл қазірдің өзінде өте маңызды кемшілік, мәтін соншалықты ерекшеленбейді.

Скриншот қара мәтіннің көк фон сияқты мөлдір болғанын анық көрсетеді.

Div (
фон: url(суреттер/сіздің кескініңіз.jpg); /* Фондық сурет */
ені: 750px
биіктігі: 100px;
маржа: авто;
}
.көк(
фон: #027av4; /* Мөлдір фон түсі */
мөлдірлік: 0,3 /* Фон мөлдірлігінің мәні */
биіктігі: 70px;
}
h1 (
толтыру: 6px
font-family: Arial Black;
шрифт салмағы: қалыңырақ;
шрифт өлшемі: 50px;
}

RGBA пішіміндегі CSS мөлдірлігі

Түс жазу пішімі RGBA, жылжымайтын мүлікке заманауи балама болып табылады мөлдірлік. R (қызыл), G (жасыл), B (көк)білдіреді: қызыл, жасыл, көк. соңғы хат А- мөлдірлікті орнататын альфа арнасын білдіреді. RGBAқарағанда Мөлдірлікеншілес элементтерге әсер етпейді.

Енді қолданатын мысалды қарастырайық RGBA. Осы жолдарды стильдерде ауыстырайық.

Фон: ##027av4; /* Фон түсі */
мөлдірлік: 0,3 /* фондық мөлдірлік мәні */

келесі жолға

Фон: rgba(2, 127, 212, 0,3);

Көріп отырғаныңыздай, 0,3 мөлдірлік мәні екі әдіс үшін де бірдей.

RGBA мысалының нәтижесі:

Екінші скриншот біріншіге қарағанда әлдеқайда жақсы көрінеді.

Блоктардың фонының мөлдірлігімен ойнай отырып, сіз сайтта қызықты әсерлерге қол жеткізе аласыз. Бұл мөлдір блоктардың фотосурет сияқты түрлі-түсті үлгінің үстіне шығуы маңызды. Тек осы жағдайда әсер айтарлықтай болады. Бұл әдіс дизайнда ұзақ уақыт бойы, тіпті кез келген пайда болғанға дейін қолданылған CSS3, ол тек графикалық бағдарламаларда жүзеге асырылды.

Тұтынушы браузердің ескі нұсқаларында жақсы көрінуін талап етсе Internet Explorerсодан кейін сипатты қосыңыз сүзгіжәне кодтың жарамдылығы бұзылмауы үшін түсініктеме беруді ұмытпаңыз.

Қорытынды

Формат RGBAқоспағанда, барлық заманауи браузерлерді қолдайды Internet Explorer. Бұл да өте маңызды RGBAикемді, ол балаларға әсер етпей, тек белгілі бір элементте әрекет етеді. Кодер үшін ыңғайлырақ екені анық. Менің таңдауым міндетті түрде форматты жақтайды RGBAалу үшін css ішіндегі мөлдірлік.

Материалды жақсырақ біріктіру және түсінікті болу үшін мен сізге өтуді ұсынамын.

Бет элементтерінің мөлдірлігін басқару үшін сипатты пайдаланыңыз CSS мөлдірлігі. Техникалық сипаттамаға сәйкес, ол кез келген түрдегі түйіндерге қолданылады және барлық заманауи браузерлерде қолдау көрсетіледі. Оның көмегімен сіз жасай аласыз қызықты дизайннемесе ыңғайлы интерактивті пайдаланушы тәжірибесін енгізіңіз.

Мүмкін мәндер

CSS ішіндегі мөлдірлік қасиетінің синтаксисі келесідей:

селектор ( мөлдірлік: 1; ) селектор ( мөлдірлік: 0; ) селектор ( мөлдірлік: 0,4; )

Енгізу ретінде 0-ден 1-ге дейінгі диапазондағы сандық мәндер қабылданады.Параметр бірдің бөлшектері болуы мүмкін, ал нүкте CSS-те бүтін сан мен бөлшек бөлік арасындағы бөлгіш ретінде пайдаланылады.

Мөлдірлігі нөлдік элемент көрінбейтін болады, бірақ бәрібір бетте өз орнын алуды жалғастырады және пайдаланушымен өзара әрекеттесу мүмкіндігін сақтайды.

Егер сипат мәні нөлге тең болмаса, онда нақты мөлдірлік кейбір жоғарғы шектің пайызы ретінде есептеледі. Қалыпты жағдайда бұлыңғырлық: 1 элементтің толық мөлдірлігін көрсетеді.

Еншілес түйіндердің мөлдірлігі

Дегенмен, егер элементтің мөлдірлігі біреуден ерекшеленетін басты элементі болса, есептеу өзгереді. Ұрпақ өзінің ата-бабаларының ешқайсысынан «кем мөлдір» бола алмайды. Ата-аналық блоктың ашықтық CSS қасиетінің мәні еншілес түйіннің мөлдірлігінің жоғарғы шегі болады.

Ата-ана ( бұлыңғырлық: 0,7; ) еншілес ( бұлыңғырлық: 1; )

Бұл жағдайда, бұлыңғырлық мәні біреу болса да, еншілес элемент 30% мөлдір болады.

Қолдану мысалдары

Мысал 1. Мөлдірлік. Блоктың негізгі фоны мақсатты элементтің астында көрінуі керек.

Мақсат (фон: қара; мөлдірлік: 0,5; )

Фон ғана мөлдір болып қана қоймайды мақсатты блоксонымен қатар мәтін.

2-мысал: Мөлдірлікті динамикалық басқару. Мақсатты блоктың CSS мөлдірлік қасиетінің мәні меңзерді оның үстіне апарған кезде өзгереді.

Мақсат ( мөлдірлік: 0,2; ) .target:hover ( бұлыңғырлық: 1; )

Динамикалық мөлдірлік

Соңғы мысал мөлдір элементтер меңзерді апару сияқты бет оқиғаларына жауап беруді жалғастыратынын көрсетеді. Бұл CSS мөлдірлік қасиетін басқару үшін JavaScript қолдануға, сонымен қатар дисплей режимін бірқалыпты өзгерту үшін өту және анимация механизмдерін пайдалануға мүмкіндік береді.

Сценарийден мөлдірлікке қол жеткізу үшін белгілі бір элементтің стиль нысанына сілтеме жасау керек.

// ағымдағы мөлдірлік мәнін алу var opacity = element.style.opacity; // жаңа мән орнату element.style.opacity = 0,4;

Блоктың біркелкі жойылуы CSS ауысу қасиетін пайдаланып жүзеге асырылуы мүмкін:

Элемент ( мөлдірлік: 0,1; өту: бұлыңғырлық 1000 мс; ) элемент: меңзерді жылжыту ( мөлдірлік: 0,8; өту: бұлыңғырлық 2000 мс; )

Енді элемент түйіні бір секунд ішінде тінтуірде өзінің мөлдірлігін 10%-дан 80%-ға дейін өзгертеді, ал курсор кеткенде ол екі секунд ішінде бастапқы мәніне дейін күңгірттенеді.

CSS мөлдірлік қасиеті өтпелі механизммен біріктіріліп, әдемі әсерлер жасауға мүмкіндік береді.

Мөлдірліктің орнына альфа арнасы

CSS-тегі мөлдірлік механизмінің негізгі нәзіктіктері:

• оның әрекеті блоктың фонына ғана емес, сонымен қатар оның мәтіндік мазмұнына да таралады, оны анық қалдырған жөн;
• еншілес элементтер негізгі элементтерге қарағанда мөлдір болуы мүмкін емес.

Егер бұл әсерлер орналасу дизайнерінің өмірін қиындатса, бұлыңғырлықтың орнына жай ғана пайдалану керек мөлдір фон, оның мәнін RGBA немесе HSLA пішімінде көрсету.

CSS-тегі мөлдірлік соңғы уақытта өте сәнді әдіс болып табылады, ол кросс-браузерлерді енгізуде қиындықтар туғызады. Осы уақытқа дейін барлық браузерлер үшін мөлдірлікті жүзеге асыруға мүмкіндік беретін әмбебап әдіс жоқ. Дегенмен, соңғы жылдары жағдай айтарлықтай жақсарды.

Бұл мақалада бар тәсілдер егжей-тегжейлі берілген және барлық браузерлерде аз күш жұмсап бірдей нәтижеге жетуге көмектесетін код мысалдары мен түсіндірмелер берілген.

Тағы бір айта кететін жайт, мөлдірлік бірнеше жыл бойы болғанымен, ол ешқашан CSS стандартының бөлігі болған емес. Бұл CSS3 спецификациясының бөлігі болуы керек стандартты емес сипат.

ескі көзқарас

Firefox және Safari ескі нұсқаларында келесідей сипатты қолдану керек:

#myElement ( -khtml-мөлдірлік: .5; -moz-мөлдірлік: 0,5; )

-khtml-opacity қасиеті webkit браузерлерінің ескі нұсқаларында қолданылған. Бұл сипат ескірген және сайтыңыздың трафигінің маңызды бөлігі Safari 1.x пайдаланатын келушілерден келетініне сенімді болмасаңыз, енді қажет емес, бұл әрине екіталай.

Келесі жол өте ұзақ уақыт жұмыс істеген -moz-opacity сипатын пайдаланады. ерте нұсқалары Mozilla қозғалтқышы. Firefox оны 0.9 нұсқасында қолдауды тоқтатты.

Firefox, Safari, Chrome және Opera жүйелеріндегі CSS мөлдірлігі

Көпшілігі үшін заманауи браузерлеркелесі сипатты пайдалану жеткілікті:

#myElement ( мөлдірлік: .7; )

Жоғарыдағы мысалда элемент 70% мөлдірлікке (30% мөлдірлікке) орнатылған. Яғни, егер мәнді біреуге қойсақ, онда элемент бұлыңғыр болады, сәйкесінше бұл мәнді нөлге қою оны көрінбейтін етеді.

Мөлдірлік қасиеті 2 ондық цифрды өңдейді. Яғни, «.01» мәні «.02» мәнінен ерекшеленеді, бірақ бұл айтарлықтай байқалмайды.

Internet Explorer үшін CSS мөлдірлігі

Әдеттегідей, Internet Explorer басқа браузерлермен жақсы жұмыс істемейді. Бұған қоса, қазір бізде бұл шолғыштың үш нұсқасы бар, олардың әрқайсысында мөлдірлік параметрі әртүрлі және кейде оң нәтиже алу үшін қосымша күш салуды қажет етеді.

#myElement (сүзгі: альфа(мөлдірлік=40); )

Бұл мысал 6-8 нұсқаларында жұмыс істейтін сүзгі сипатын пайдаланады, бірақ 6 және 7 нұсқалары үшін бір шектеу бар: элементтің hasLayout сипаты шын мәніне орнатылуы керек. Бұл қасиет тек IE-де бар және сіз бұл туралы көбірек оқи аласыз, мысалы, Habré.

IE8 жүйесінде CSS көмегімен мөлдірлікті орнатудың тағы бір жолы келесі тәсілді пайдалану болып табылады (түсініктемелерге назар аударыңыз):

#myElement (сүзгі: progid:DXImageTransform.Microsoft.Alpha(мөлдірлік=40); /* IE6, IE7 және IE8-де жұмыс істейді */ -ms-сүзгі: "progid:DXImageTransform.Microsoft.Alpha(мөлдірлік=40)"; / * тек IE8 */ )

Бірінші жол барлық қолданыстағы нұсқаларда, екіншісі - тек IE8-де жұмыс істейді. Екінші жолда -ms- префиксі қолданылатынын және мән тырнақшаға алынғанын ескеріңіз.

JavaScript немесе jQuery көмегімен CSS мөлдірлігін орнату және өзгерту

Мөлдірлікті орнату үшін келесі кодты пайдалануға болады:

Document.getElementById("myElement").style.opacity = ".4"; // көптеген браузерлер үшін document.getElementById("myElement").style.filter = "альфа(мөлдірлік=40)"; // IE үшін

Әрине, бұл жағдайда jQuery-ді пайдалану әлдеқайда оңай және ол барлық браузерлерде де жұмыс істейді:

$("#myElement").css(( ашықтық: .4 )); // барлық браузерлерде жұмыс істейді

Бұл сипатты анимациялауға болады:

$("#myElement").animate(( ашықтық: .4 ), 1000, function() ( // Анимация аяқталды; бұл код барлық браузерлерде жұмыс істейді. ));

RGBA функциясы

CSS3 альфа арнасын rgba функциясымен қолдауды жоспарлап отыр. Бұл мүмкіндік Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+ нұсқаларында жұмыс істейді. Ол келесідей қолданылады:

#rgba (фон: rgba(98, 135, 167, .4); )

Бұл жағдайда соңғы параметр мөлдірлік деңгейін көрсетеді.

HSLA функциясы

Алдыңғы функция сияқты, CSS3 сонымен қатар HSLA функциясын пайдаланып мөлдір түсті орнатуға мүмкіндік береді, оның параметрлері Реңк (Реңк), Қанықтылық (Қанығу), Жарықтық (Жарықтық) және Альфа арнасын (Альфа) білдіреді.

#hsla (фон: hsla(207, 38%, 47%, .4); )

Rgba және hsla функцияларын пайдалану кезіндегі маңызды мәселе - мөлдірлік параметрі қолданылмайды еншілес элементтер, бұлыңғырлық қасиетін пайдалану мұраланған.

CSS мөлдірлігі – кросс-браузер шешімі - 6 дауыс негізінде 5/3,8

Бұл оқулықта біз CSS мөлдірлігін қарастырамыз, беттің әртүрлі элементтерін мөлдір етуді үйренеміз және толық кросс-шолғышқа қол жеткіземіз, яғни әртүрлі браузерлерде осы әсердің бірдей әсеріне қол жеткіземіз.

Кез келген элементтің мөлдірлігін қалай орнатуға болады

CSS3-те мөлдірлік қасиеті кез келген элементке қолдануға болатын мөлдір элементтерді жасауға жауап береді. Бұл сипаттың мөлдірлік дәрежесін анықтайтын 0-ден 1-ге дейінгі мәндері бар. Мұндағы 0 толық мөлдір (барлық элементтер үшін әдепкі мән) және 1 толық мөлдір емес. Мәндер бөлшек түрінде жазылады: 0,1, 0,2, 0,3, т.б.

Қолдану мысалы:

Браузердің кросс-мөлдірлігі

Барлық браузерлер жоғарыдағы мөлдірлік қасиетін бірдей қабылдап, орындай бермейді. Кейбір жағдайларда басқа сипат атауын немесе сүзгілерді пайдалану қажет.

CSS3 мөлдірлік қасиеті келесі түрлерге қолдау көрсетеді Mozilla браузерлері 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Өте жақсы :) Internet Explorer сияқты 9.0 нұсқасына дейінгі шолғыш мөлдірлік қасиетіне қолдау көрсетпейді және бұл шолғыш үшін мөлдірлікті жасау үшін сүзгі сипатын және alpha(Opacity=X) мәнін пайдалану керек, мұнда X 0 мен 100 арасындағы бүтін сан болып табылады. ашықтық деңгейі. 0 толық мөлдірлік және 100 толық мөлдірлік.

Қатысты Firefox шолғышы 3.5 нұсқасына дейін ол мөлдірліктің орнына -moz-opacity сипатын қолдайды.

KHTML қозғалтқышында құрастырылған Safari 1.1 және Konqueror 3.1 сияқты браузерлер мөлдірлікті басқару үшін -khtml-opacity қасиетін пайдаланады.

Барлық браузерлерде бірдей көрінетіндей етіп CSS-те мөлдірлікті қалай орнатуға болады? Элементтердің мөлдірлігі үшін кросс-шолғыш шешімін жасау үшін олар тек бір мөлдірлік қасиетін ғана емес, келесі сипаттар жинағын тіркеуі керек:

сүзгі: альфа(Мөлдірлік=50); /* IE үшін мөлдірлік */ -moz-мөлдірлік: 0,5; /* Mozilla 3.5 және одан төмен нұсқаларын қолдау */ -khtml-мөлдірлік: 0,5; /* Konqueror 3.1 және Safari 1.1 үшін қолдау */ мөлдірлік: 0,5; /* Барлық басқа браузерлерді қолдау */

Әртүрлі элементтердің мөлдірлігі

Мөлдірлікті орнатудың кейбір мысалдарын қарастырыңыз белгілі бір элементтер, олар бетте жиі қолданылады.

CSS кескінінің мөлдірлігі.

Мөлдір кескінді жасаудың бірнеше нұсқасын қарастырыңыз. Келесі мысалда бірінші суретте мөлдірлік жоқ, екіншісінде 50% мөлдірлік, үшіншіде 30% мөлдірлік бар.

Нәтиже:

Кескіннің үстіне меңзерді апарған кезде CSS мөлдірлігі.

Көбінесе курсорды оның үстіне апарған кезде суретті немесе кез келген басқа элементті мөлдір ету қажет. Мұны істеуге болады CSS анықтамасыпсевдокласс: hover. Ол үшін біздің сурет екі классты тіркеуі керек, біреуі кәдімгі - бұл суреттің белсенді емес күйі және псевдоклассы бар екінші класс болады: меңзерді апарыңыз, мұнда суреттің түсіру кезіндегі мөлдірлігін көрсету керек. курсорды апару.

Нәтижені демонстрацияда көруге болады.

CSS фондық мөлдірлігі

Мұнда мөлдірліктің барлық кірістірілген элементтерге қолданылатынын және олар кірістірілген элементтен артық мөлдірлікке ие бола алмайтынын есте сақтау керек.

Мысал ретінде сурет арқылы жасалған бет фоны бар нұсқаны және түсті пайдаланып жасалған және 50% мөлдірлігі бар фоны бар блокты алайық.

Код мысалы:

Міне, жоғарыдағы кодтың нәтижесі: