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 функцияларын пайдалану кезіндегі маңызды сәт мөлдірлік параметрі еншілес элементтерге қолданылмайды, ал бұлыңғырлық қасиетін пайдалану мұраланған.
Влад Мержевич
Элементтің мөлдірлігінің әсері фондық суретте анық көрінеді және әртүрлі жерлерде кең таралған. операциялық жүйелерөйткені ол стильді және әдемі көрінеді. Веб-дизайнда мөлдірлік те пайдаланылады және мөлдірлік қасиеті немесе пішімі арқылы қол жеткізіледі RGBA түстері, ол фонға орнатылған.
Градиент блогы
Суретте көрсетілген блокты жасаңыз. 1. Блокта тақырыптың астындағы градиент фоны және шағын көрсеткіші бар мөлдір градиентті жақтау бар. Беттегі фон мөлдірлік әсерінің анықтығы үшін ғана берілген, сіз өзіңіздің кез келген суретіңізді көрсете аласыз; Ең төменгі блок биіктігі - 100px.
Қабатты жартылай мөлдір етіп қалай жасауға болады?
Элементтің мөлдірлік дәрежесін өзгерту үшін 0-ден 1-ге дейінгі мәні бар мөлдірлік стилінің қасиетін пайдаланыңыз, мұнда 0 толық мөлдірлікке, ал 1, керісінше, нысанның мөлдірлігіне сәйкес келеді. Бұл сипат Internet Explorer шолғышында жұмыс істемейді, сондықтан ол үшін арнайы сүзгіні пайдалану керек, ол CSS спецификациясының бөлігі болып табылмайды. 1-мысал барлық браузерлер үшін қабат мөлдірлігін орнату жолын көрсетеді.
Мөлдір фон
Влад Мержевич
Жартылай мөлдірлік, дұрыс пайдаланылған кезде, веб-сайт дизайнында өте әсерлі көрінеді. Ең бастысы, мөлдір блоктардың астында монохроматикалық дизайн емес, бұл жағдайда мөлдірлік байқалады; Бұл әсерге көптеген жолдармен қол жеткізіледі және ескі әдістерді қоса алғанда, барлығын есте сақтасаңыз, ол PNG кескінін фон ретінде пайдалана отырып, кескінді кескінді және мөлдірлік қасиетін жасайды. Бірақ блокта мөлдір фон жасау қажеттілігі туындаған кезде, бұл әдістердің жағымсыз жағы бар. Мен не туралы айтып жатқанымызды түсіну үшін, сондай-ақ мөлдір әсерді жасаудың дәстүрлі емес нұсқаларымен таныс емес оқырмандар үшін қысқаша шолу жасаймын.
Кестені мөлдір етіп қалай орнатуға болады, бірақ кейбір ұяшықтар емес?
Элементтің мөлдірлігін өзгерту үшін CSS3 оның мәні 0-ден 1-ге дейін өзгеруі мүмкін. Қазіргі браузерлер бұл сипатпен өте дұрыс жұмыс істейді, қоспағанда Интернет браузері Explorer, сондықтан ол үшін alpha(Opacity=X) мәні бар арнайы сүзгі сипатын пайдалану керек, мұнда X 0-ден 100-ге дейін өзгеруі мүмкін.
Бұл сабақта біз осындайларды қарастырамыз CSSқасиеттері - мөлдірлікЖәне RGBA. Меншік Мөлдірлікэлементтердің мөлдірлігі мен функциясына ғана жауап береді RGBA– түс пен мөлдірлік үшін, егер сіз альфа арнасының мөлдірлік мәнін көрсетсеңіз.
CSS мөлдірлігі Мөлдірлік
үшін сандық мән мөлдірлік 0,0-ден 1,0-ге дейінгі диапазонда орнатылады, мұнда нөл - толық мөлдірлік, ал біреуі, керісінше, абсолютті мөлдірлік. Мысалы, 50% мөлдірлікті көру үшін мәнді 0,5 мәніне орнату керек. Соны есте ұстау керек мөлдірліката-ананың барлық еншілес элементтеріне таратады. Бұл мөлдір фондағы мәтін де мөлдір болады дегенді білдіреді. Және бұл өте маңызды кемшілік мәтін соншалықты жақсы көрінбейді;
CSS Opacity арқылы мөлдірлік
Скриншот қара мәтіннің көк фон сияқты мөлдір болғанын анық көрсетеді.
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-тегі ашықтық.
Материалды жақсырақ біріктіру және түсінікті болу үшін мен сізге өтуді ұсынамын.
HTML және CSS-те мөлдір фон жасау (мөлдірлік және RGBA әсерлері)
Мөлдір әсерэлементі фондық суретте анық көрінеді және әртүрлі операциялық жүйелерде кең таралған, себебі ол стильді және әдемі көрінеді. Ең бастысы - мөлдір блоктардың астында монохроматикалық үлгі емес, бұл жағдайда мөлдірлік байқалады;
Бұл әсерге әртүрлі жолдармен қол жеткізіледі, соның ішінде PNG кескінін фон ретінде пайдалану, пішінді кескінді жасау және мөлдірлік қасиеті сияқты ескірген әдістер. Бірақ блокта мөлдір фон жасау қажеттілігі туындаған кезде, бұл әдістердің жағымсыз жақтары бар.
Мәтін мен фонның мөлдірлігін қарастырайық - оны веб-сайт дизайнында қалай дұрыс пайдалану керек:
Бұл сипаттың басты ерекшелігі мөлдірлік мәні фондық емес, оның ішіндегі барлық еншілес элементтерге әсер етеді. Бұл фон да, мәтін де мөлдір болады дегенді білдіреді. Мөлдірлік пәрменін 0,1-ден 1-ге өзгерту арқылы мөлдірлік деңгейін арттыруға болады.
HTML 5 CSS 3 IE 9
Веб-дизайнда ішінара мөлдірлік те пайдаланылады және элементтің фоны үшін ғана орнатылған RGBA түс пішімі арқылы қол жеткізіледі.
Әдетте дизайнда элементтің фоны ғана мөлдір болуы керек, ал мәтін оқылуды сақтау үшін бұлыңғыр болуы керек. Бұл жерде мөлдірлік қасиеті жарамайды, себебі элемент ішіндегі мәтін де ішінара мөлдір болады. Оның бөлігі ретінде альфа арнасы немесе басқаша айтқанда, мөлдірлік мәні бар RGBA пішімін қолданған дұрыс. Мән rgba деп жазылады, содан кейін қызыл, көк және жасыл түсті құрамдастардың мәндері үтірмен бөлінген жақшаның ішінде тізімделеді. Соңғысы - мөлдірлік, ол 0-ден 1-ге дейін орнатылады, 0 толық мөлдірлікті білдіреді және 1 түсті бұлыңғырлық - rgba пайдалану синтаксисі.
Мөлдір фон HTML 5 CSS 3 IE 9
CSS мөлдірлік қасиеті html-дегі элементтердің (суреттер, мәтіндер, блоктар) мөлдірлігіне жауап береді.
CSS мөлдірлік синтаксисі
Мұндағы мән 0,0-ден 1,0-ге дейінгі диапазондағы нақты мәндерді қабылдай алады. 1,0 мәні мөлдірліктің жоқтығын білдіреді (әдепкі).
№1 мысал. html форматындағы мөлдір сурет
Бірінші сурет мөлдірліксіз, екіншісі 0,5 мөлдірлікпен көрсетіледі
Элемент мөлдірлігі
Меңзерді жылжытқанда кескінді мөлдір етіңіз!
ДемоЖүктеу көздеріНазар аударғаныңызға рақмет!
Келесі мақала
Қарау
Айналдыру арқылы div блогын қалай жасауға болады?
