CSS تەگلىك بىلوگىغا تونۇشتۇرۇش CSS دا قالايمىقان ئارقا كۆرۈنۈش ھاسىل قىلىش ئەزەلدىن ئاسان ئەمەس. پەقەت بىر قۇر كود ئارقىلىق ، ئابونتلارنىڭ تەجرىبىسىنى ئاشۇرىدىغان ۋە گۈزەللىك لايىھەلەيدىغان كەسپىي كۆرۈنۈشلۈك ئۈنۈمگە ئېرىشەلەيسىز. بۇ تېخنىكا مودېل كۆزنەك ، رەسىم قاپلاش ۋە زامانىۋى تور ئارايۈزى ئۈچۈن ئالاھىدە پايدىلىق بولۇپ ، ئارقا كۆرۈنۈشنى ئەپچىللىك بىلەن تەكىتلەش بىلەن بىللە ، كونكرېت مەزمۇنلارغا دىققەت قىلماقچى.
بۇنىڭ سىرى CSS نىڭ ئارقا سۈزگۈچ خۇسۇسىيىتىدە بولۇپ ، ئۇ ئېلېمېنتنىڭ ئارقىسىدىكى رايونغا گرافىكلىق ئۈنۈم بېرىدۇ. بۇ كۈچلۈك CSS ئىقتىدارى پروگرامما ئاچقۇچىلارغا مۇرەككەپ JavaScript ياكى قوشۇمچە رەسىم تەھرىرلىمەي تۇرۇپ كىشىنى ھەيران قالدۇرىدىغان كۆرۈنۈش ئۈنۈمى ھاسىل قىلالايدۇ. مەيلى سىز بىرىكمە توربېكەت ، ئېلېكترونلۇق سودا سۇپىسى ياكى تور قوللىنىشچان پروگراممىسىدا ئىشلەڭ ، بۇ تېخنىكىنى ئىگىلىسىڭىز لايىھىلەش ئىقتىدارىڭىزنى ئۆستۈرىدۇ.
بىر قۇر كود بىلەن ئارقا كۆرۈنۈشنى قانداق يولغا قويۇش سېھىرگەرلىك بۇ ئاددىي CSS خىتابنامىسى بىلەن يۈز بېرىدۇ:
تەگلىك سۈزگۈچ: تۇتۇق (5px);
بۇ بىر قۇر كود ئېلېمېنتنىڭ ئارقىسىدىكى تەگلىك مەزمۇنىغا گاۋسىيىلىك تۇتۇق ئۈنۈم بېرىدۇ. تۇتۇق ئىقتىدار ئىچىدىكى قىممەت (بۇ مىسالدىكى 5px) تۇتۇق ئۈنۈمنىڭ كۈچلۈكلۈك دەرىجىسىنى بەلگىلەيدۇ. سىز بۇ قىممەتنى تەڭشەپ ، ئىنچىكە يۇمشاشتىن ئېغىر دەرىجىدە قالايمىقان ئارقا كۆرۈنۈشكىچە ئېرىشەلەيسىز.
ئاساسىي يولغا قويۇش مىسالى بۇ يەردە مودېل قاپلاشتا تەگلىك تۇتۇقلىقىنى قانداق ئىشلىتىشنى كۆرسىتىدىغان تولۇق بىر مىسال بار:
.modal-overlay { ئورنى: مۇقىم; top: 0; left: 0; كەڭلىكى: 100%; ئېگىزلىكى: 100%; background-color: rgba (0, 0, 0, 0.5); تەگلىك سۈزگۈچ: تۇتۇق (5px); }
بۇ كود ئاساسىي مەزمۇنغا 5 پېكسىللىق تۇتۇق ئۈنۈم بىلەن يېرىم سۈزۈك قاپلاشنى ھاسىل قىلىدۇ. Rgba تەگلىك رەڭگى قاراڭغۇ قاپلاشنى تەمىنلەيدۇ ، شۇنىڭ بىلەن بىر ۋاقىتتا قالايمىقان مەزمۇنلارنى كۆرسىتىپ بېرىدۇ.
ئىلغار تۇتۇق تېخنىكىلار ۋە خاسلاشتۇرۇش ئاساسىي تۇتۇق ئۈنۈمى كۈچلۈك بولسىمۇ ، لايىھىلەش ئېھتىياجىڭىزغا ماس ھالدا ئۇنى تېخىمۇ خاسلاشتۇرالايسىز. تەگلىك سۈزگۈچ خۇسۇسىيىتى تېخىمۇ مۇرەككەپ ئۈنۈملەر ئۈچۈن بىرلەشتۈرۈلگەن كۆپ خىل سۈزگۈچ ئىقتىدارىنى قوللايدۇ.
كۆپ سۈزگۈچ ئۈنۈمىنى بىرلەشتۈرۈش سىز بىر قانچە سۈزگۈچ فۇنكسىيەسىنى بىرلەشتۈرۈپ ، مۇرەككەپ كۆرۈنۈش ئۈنۈمىنى ھاسىل قىلالايسىز:
تەگلىك سۈزگۈچ: تۇتۇق (10px) يورۇقلۇق دەرىجىسى (0.8); - تۇتۇق ۋە تەگلىكنى قاراڭغۇلاشتۇرىدۇ تەگلىك سۈزگۈچ: تۇتۇق (5px) تويۇنۇش (% 150); - تۇتۇقلىقنى ئىشلىتىپ ، رەڭنىڭ تويۇنۇشىنى ئاشۇرىدۇ تەگلىك سۈزگۈچ: تۇتۇق (8px) كۈلرەڭ (% 50); - تۇتۇقنى قىسمەن كۈلرەڭ ئېففېكتى بىلەن بىرلەشتۈرىدۇ
بۇ بىرلەشتۈرۈشلەر مەزمۇن فوكۇس ۋە ئابونتلارنىڭ ئاكتىپلىقىنى ئاشۇرىدىغان ئۆزگىچە كۆرۈنۈش تەجرىبىلىرىنى يارىتالايسىز. ئوخشىمىغان قىممەت بىلەن تەجرىبە قىلىپ ، لايىھىڭىزنىڭ مۇكەممەل تەڭپۇڭلۇقىنى تېپىڭ.
توركۆرگۈچنىڭ ماسلىشىشچانلىقى ئارقا كۆرۈنۈش سۈزگۈچ كۆپىنچە زامانىۋى توركۆرگۈچلەردە قوللانغان بولسىمۇ ، كونا توركۆرگۈچلەردە كەمتۈكلۈك بىلەن تەمىنلەش ئىنتايىن مۇھىم. بۇ يەردە پۇختا يولغا قويۇش ئۇسۇلى:
.modal-overlay { background-color: rgba (0, 0, 0, 0.7); / * كونا توركۆرگۈچلەرنىڭ خاتالىقى * / }
@supports (backdrop-filter: blur (5px)) { .modal-overlay { background-color: rgba (0, 0, 0, 0.5); تەگلىك سۈزگۈچ: تۇتۇق (5px); } }
بۇ تەدرىجىي كۈچەيتىش ئۇسۇلى زامانىۋى توركۆرگۈچلەرنى كۆرۈش ئۈنۈمى بىلەن تەمىنلەش بىلەن بىرگە ، بارلىق توركۆرگۈچلەردە لايىھىلىشىڭىزگە كاپالەتلىك قىلىدۇ.
ئەمەلىي قوللىنىش ۋە دېلولارنى ئىشلىتىش تەگلىك تۇتۇق ئۈنۈمى زامانىۋى تور لايىھىلەشتە نۇرغۇنلىغان ئەمەلىي قوللىنىشچان پروگراممىلارغا ئىگە. بۇ يەردە ئەڭ ئۈنۈملۈك ئىشلىتىش ئەھۋاللىرى بار:
مودېل Windows ۋە سۆزلىشىش رامكىسى تەگلىك تۇتۇق مودېل كۆزنەكلەرگە ماس كېلىدۇ ، بۇ يەردە ئابونتلارنىڭ دىققىتىنى دىئالوگ مەزمۇنىغا مەركەزلەشتۈرمەكچى. تۇتۇق تەگلىك كۆرۈش قالايمىقانچىلىقىنى ئازايتىپ ، ئېنىق كۆرۈش دەرىجىسىنى ھاسىل قىلىدۇ. بۇ تېخنىكا كىرىش شەكلى ، جەزملەشتۈرۈش دىئالوگى ۋە ئۇقتۇرۇش ئۇچۇرلىرىدا كەڭ قوللىنىلىدۇ.
رەسىم كارىدورى ۋە پورتفولىئو بېكەتلىرى ئىشلەتكۈچىلەر كىچىك رەسىملەرنى چەككەندە ، باش بەت مەزمۇنىغا تەگلىك تۇتۇق ئىشلىتىش چوڭايتىلغان رەسىمنىڭ ئالاھىدە بولۇشىغا ياردەم بېرىدۇ. بۇ خىل ئۇسۇل فوتوگرافلىق رەسىملەر ، مەھسۇلاتلار كۆرگەزمىخانىسى ۋە كۆرۈنۈش فوكۇس نۇقتىسى ئىنتايىن مۇھىم بولغان سەنئەت ئەسەرلىرى كۆرگەزمىسى ئۈچۈن ئالاھىدە ئۈنۈملۈك.
يول باشلاش تىزىملىكى ۋە يانبالداق زامانىۋى كۆچمە ئەپلەر ۋە تور بېكەتلەر سىيرىلما يول باشلاش تىزىملىكىگە ئارقا كۆرۈنۈشنى ئىشلىتىدۇ. تىزىملىك سىيرىلغاندا ، ئاساسلىق مەزمۇن ئارقا سۇپىدا ئەپچىللىك بىلەن تۇتۇقلىشىپ ، مۇرەككەپ قاتلاملىق ئۈنۈم ھاسىل قىلىدۇ. بۇ تېخنىكا كۆچمە يول باشلاش ئەندىزىسى ۋە يوشۇرۇن يان بالداق ئۈچۈن ياخشى ئىشلەيدۇ.
ئىقتىدار كۆز قارىشى ۋە ئەڭ ياخشى ئەمەلىيەت تەگلىك سۈزگۈچ كۈچلۈك بولسىمۇ ، ئەدلىيەلىك ئىشلىتىش ئارقىلىق ئەڭ ياخشى ئىقتىدارنى ساقلاش كېرەك. بۇ يەردە مۇھىم ئويلىنىشلار بار:
تېجەشلىك ئىشلىتىش: تۇتۇق ئۈنۈمنىلا ئىشلىتىڭئىقتىدار زەربىسىدىن ساقلىنىش ئۈچۈن زۆرۈر ئېلېمېنتلار كۆچمە تېلېفوندا سىناق: بەزى كۆچمە ئۈسكۈنىلەردە ئېغىر دەرىجىدىكى تۇتۇق تەسىرى بار ئىقتىدار مەسىلىسى كۆرۈلۈشى مۇمكىن تاللاش ئۇسۇلىنى ئويلىشىپ كۆرۈڭ: تۇراقلىق تەگلىك ئۈچۈن ، ئالدىن ئېنىقلانغان رەسىملەر تېخىمۇ ئۈنۈملۈك بولۇشى مۇمكىن تەدرىجىي يۇقىرى كۆتۈرۈش: ئىقتىدارنى قوللىمايدىغان توركۆرگۈچلەرگە ھەمىشە كەمتۈكلۈك بىلەن تەمىنلەيدۇ
يېقىنقى كەسىپ تەرەققىياتى كۆرۈنۈش ئۈنۈمىنىڭ قانداق تەرەققىي قىلىدىغانلىقىنى كۆرسىتىپ بېرىدۇ. مەسىلەن ، Zoox بۇ يىل ئۆزىنىڭ ماشىنا ئادەملىرىنى ۋېگاستىكى Uber دېتالىغا قويۇشنى پىلانلاپ ، ئابونت كۆرۈنمە يۈزىدە يېڭىلىق يارىتىشنىڭ تېخىمۇ كەڭ تېخنىكىنىڭ قوللىنىلىشىنى ئىلگىرى سۈردى.
خۇلاسە ۋە كېيىنكى قەدەملەر ئارقا كۆرۈنۈش سۈزگۈچ خۇسۇسىيىتى بىلەن CSS تەگلىك تۇتۇقلىقىنى ئىگىلەش كىشىنى ھاياجانغا سالىدىغان لايىھىلەش مۇمكىنچىلىكىنى ئاچىدۇ. بۇ بىر قۇر ھەل قىلىش ئۇسۇلى كەسپىي كۆرۈنۈش ئۈنۈمى بىلەن تەمىنلەيدۇ ، ئۇ ئابونتلارنىڭ تەجرىبىسىنى ئاشۇرىدۇ ۋە تور يۈزىڭىزنى زامانىۋىلاشتۇرىدۇ. تور كۆرگۈچ ۋە ئۈسكۈنىلەردە سىناق قىلىشنى ئۇنتۇپ قالماڭ.
ئىلغار CSS تېخنىكىسى ئۈستىدە ئىزدىنىش جەريانىدا ، يېڭىدىن گۈللىنىۋاتقان تېخنىكىلارنىڭ تور لايىھىلىنىشىگە قانداق تەسىر كۆرسىتىدىغانلىقىنى ئويلاڭ. كۆرۈش تېخنىكىسىدىكى رىقابەت ناھايىتى كەسكىن ، چۈنكى Nvidia نىڭ ئاپتوماتىك ھەيدەش مەسئۇلى ئۇنىڭ Waymo ۋە تېسلانى مەغلۇب قىلىش پىلانىنى ئاچقان. ئوخشاشلا ، يەرشارى خاراكتېرلىك ۋەقەلەر تېخنىكىنىڭ قوللىنىلىشىغا تەسىر كۆرسىتەلەيدۇ ، خۇددى تىرامپنىڭ ئىرانغا قىلغان ئۇرۇشى قانداق قىلىپ مىليونلىغان ساياھەتچىنى بوغۇپ ، دېڭىز قولتۇقى ئەڭ ياخشى كۆرىدىغان ئويۇن مەيدانىنى قالايمىقانچىلىققا پېتىپ قالدى.
تۈرلىرىڭىزدە كىشىنى ھەيران قالدۇرىدىغان كۆرۈنۈش ئۈنۈمىنى يولغا قويۇشقا تەييارمۇ؟ ئارقا كۆرۈنۈش سۈزگۈچنى سىناق قىلىشنى بۈگۈندىن باشلاپ ، بىر قۇر كود لايىھەلىرىڭىزنى قانداق ئۆزگەرتەلەيدىغانلىقىنى كۆرۈڭ. ئىلغار CSS ئىقتىدارلىرىنى يوچۇقسىز يولغا قويۇش ئۈچۈن ، Seemless نى ئىشلىتىپ تەرەققىيات خىزمەت ئېقىمىڭىزنى راۋانلاشتۇرۇپ ، كەسپىي نەتىجىنى تېزرەك قولغا كەلتۈرۈشنى ئويلاڭ.
