Mūsdienās ir pieprasītas vietnes ar responsīviem fona attēliem. Adaptīvās vietnes nodrošina lietotājiem ideālu lietošanas pieredzi gandrīz visās ierīcēs, tostarp mobilajos tālruņos, planšetdatoros vai galddatoros. Adaptīvi attēli var pielāgot vietnes fonu, ekrāna izmēru un izmērus. Atsaucīgi attēli nodrošina kvalitātes un proporciju saglabāšanu. Turklāt vietne ar atsaucīgiem fona attēliem tiek ielādēta ātri.
Šajā rokasgrāmatā ir sniegti norādījumi, kā pielāgot fona attēlus ekrāna izmēriem.
Kā pielāgot fona attēlus ekrāna izmēriem?
Attēlu var pielāgot ekrāna izmēriem, izpildot tālāk sniegtos pakāpeniskus norādījumus.
1. darbība: izveidojiet HTML struktūru
Vispirms izveidojiet HTML struktūru un pievienojiet ārējo stila lapu, izmantojot
< html >
< galvu >
< saite rel = 'stila lapa' href = 'stils.css' >
< virsraksts > Adaptīvs fona attēls virsraksts >
galvu >
< ķermenis >
-- Apgabals, lai pievienotu citu saturu-- >
ķermenis >
html >
2. darbība: izmantojiet CSS
Tagad izmantojiet CSS ķermenis ” sadaļa. Vispirms norādiet fona attēlu. Šim nolūkam izmantojiet ' fona attēls ” un norādiet „ url() ” vērtība, kas satur attēla faila adresi.
Pēc tam izmantojiet ' fona attēls ”, lai norādītu attēla izmēru, fona atkārtojums ' rekvizītu, lai iestatītu attēla atkārtošanos, un ' fona pielikums ”, lai iestatītu, vai attēls ritinās kopā ar pārējo lapu. Visbeidzot iestatiet ' starpība ' un ' polsterējums 'uz' 0 ”:
ķermenis {fona attēls: url ( 'testa attēls.jpg' ) ;
fona izmērs: 100 % 100 % ;
/* Mērogojiet attēlu līdz 100 % platums un 100 % augstums */
fona atkārtojums: neatkārtot;
fona pielikums: fiksēts;
piemale: 0 ;
polsterējums: 0 ;
/* Pēc izvēles: fiksēts fons */
}
Izvade
Šī ir izvade pirms pārlūkprogrammas loga noslēgšanas:
Pēc pārlūkprogrammas kontrakcijas:
Iepriekš minētā izvade apstiprina, ka attēls ir pielāgojis fonu ekrāna izmēriem.
Secinājums
Lai fona attēlus pielāgotu ekrāna izmēriem, vispirms iekļaujiet “ skata logs ” galvas sadaļā, lai kontrolētu izmērus un mērogošanu. Pēc tam izveidojiet HTML struktūru un lietojiet CSS. Programmā CSS iestatiet “ fona izmērs 'īpašuma vērtība uz ' piesegt ” vērtību, lai mērogotu attēla augstumu un platumu. Šajā rakstā ir sniegts pilnīgs ceļvedis fona attēlu pielāgošanai ekrāna izmēriem.