CSS-ті қолданып, жауапты дизайн суреттерін қалай қосуға болады
Бүгінгі таңда танымал веб-сайттарға қарап, көруге болатын бір дизайны бар, үлкен, экранды қамтитын фондық суреттер. Бұл бейнелерді қосудағы қиындықтардың бірі веб-сайттар әр түрлі экран өлшемдері мен құрылғыларына жауап беруі тиіс ең жақсы тәжірибеден алынған - жауапты веб-дизайн ретінде белгілі тәсіл.
Веб-сайтыңыздың орналасуы әртүрлі экран өлшемдері өзгеріп, таразылардың өзгергендіктен, бұл фондық суреттер олардың өлшемін сәйкесінше ұлғайтуы керек.
Шындығында, бұл «сұйықтық кескіндері» жауап беретін веб-сайттардың негізгі бөліктерінің бірі (сұйықтық тормен және бұқаралық ақпарат құралдарымен бірге). Бұл үш бөлік басынан бастап жауапты веб-дизайнның негізі болды, бірақ сайтқа жауапты кірістірілген бейнелерді қосу өте ыңғайлы болғанымен (кірістірілген суреттер HTML түзетулерінің бөлігі ретінде кодталған графика) фондық суреттермен қатар (олар CSS фондық сипаттарын пайдаланып бетке қойылған) көптеген веб-дизайнерлер мен алдыңғы өңдегіштерге ұзақ уақыт бойы қиындық туғызды. Бақытымызға орай, CSS-те «background-size» сипатын қосу бұл мүмкіндікті жасады.
Жеке бапта мен CSS3 сипатының фонды-өлшемін терезелерге сəйкестендіру үшін кескіндерді созу үшін қалай қолдануға болатынын білдім, бірақ бұл сипат үшін қолданудың жақсы әрі пайдалы жолы бар. Мұны істеу үшін төмендегі сипатты және мән комбинациясын қолданамыз:
background-size: қақпақ;
Мұқаба кілт сөзінің сипаты шолғышқа терезені қаншалықты үлкен немесе кішкентай болатынына қарамастан, терезеге сәйкес келетін кескінді масштабтауға нұсқайды. Кескін бүкіл экранды жабу үшін масштабталады, бірақ түпнұсқа пропорциялар мен формат арақатынасы сақталып, кескіннің өзі бұрмалануына жол бермейді.
Терезенің барлық бетін жабу үшін, терезе терезеге мүмкіндігінше үлкен орналастырылады. Бұл дегеніміз, сіздің бетіңізде ешқандай бос орындар болмауы немесе кескіннің бұрмалануы болмайды, бірақ сонымен қатар, кейбір суреттер экранның арақатынасы мен суретке байланысты кесілген болуы мүмкін. Мысалы, кескіннің жиектері (жоғарғы, төменгі, сол немесе оң жақта) фондық-орналасу сипаты үшін пайдаланылатын мәндерге байланысты кескіндерде кесілуі мүмкін. Егер өңді «жоғарғы сол жаққа» бағыттасаңыз, кескіннің кез келген астығы төменгі және оң жағынан шығады. Егер сіз фондық суретті ортаға салсаңыз, артықшылық барлық жағынан өшіріледі, бірақ оның артықшылығы таралғандықтан, кез-келген тарапқа әсер ету аз болады.
Фон-өлшемді қалай пайдалануға болады: мұқаба;
Фондық суретіңізді жасаған кезде өте үлкен сурет жасау жақсы идея. Браузерлер визуалды сапаға елеулі әсер етпей, суретті кішірейте алады, алайда браузер кескінді түпнұсқа өлшемнен үлкен мөлшерге дейін кеңейтсе, визуалды сапа нашарлайды, бұлыңғыр және пикселге айналады. Бұдан басқа, барлық экрандарға алып бейнені жеткізген кезде сіздің бетіңіз өнімділік хитіне ие болады.
Мұны істегенде, сол суреттерді жүктеу жылдамдығы мен веб-жеткізілімі үшін дұрыс дайындаңыз . Ақыр соңында, сіз бақытты ортаны жеткілікті мөлшерде сурет өлшемі мен сапасы мен жүктеу жылдамдығына сай келетін файл өлшемі арасында табуыңыз керек.
Масштабты фондық кескіндерді пайдаланудың қарапайым тәсілдерінің бірі - бұл кескіннің беттің толық фонын алуын қаласаңыз, сол бет кең және жұмыс үстелі компьютерінде немесе әлдеқайда кішкентай болса да, мобильді, ұялы телефонға құрылғылар.
Кескінді веб-хостыңызға жүктеңіз және CSS-ге фондық сурет ретінде қосыңыз:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: қайталаусыз;
background-position: орталық орталығы;
background-attachment: тіркелген;
Алдымен браузерді CSS-ді қосыңыз:
-webkit-background-size: қақпақ;
-moz-background-size: қақпақ;
-o-background-size: қақпақ;
Содан кейін CSS сипатын қосыңыз:
background-size: қақпақ;
Түрлендіргіш құрылғыларға сәйкес келетін әртүрлі бейнелерді пайдалану
Жұмыс үстеліне немесе ноутбукке арналған мұқият дизайн маңызды болғандықтан, вебке қатынасатын құрылғылардың әртүрлілігі айтарлықтай өсті және экран өлшемдерінің көп мөлшері әр түрлі болады.
Жоғарыда айтылғандай, смартфонға өте үлкен жауапты фондық суретті жүктеу, мысалы, тиімді немесе өткізу қабілеті саналы емес конструкция емес.
Мультимедиа сұрауларын көрсетілетін құрылғыларға сәйкес келетін суреттерге қалай қол жеткізе алатындығыңызды және мобильді құрылғылармен веб-сайтыңыздың үйлесімділігін жақсартуды үйреніңіз.
Дженнфьер Крининнің түпнұсқа мақаласы. Jeremy Girard 9/12/17 өңдейді