Šiais laikais svetainės su reaguojančiais fono vaizdais yra paklausios. Interaktyvios svetainės suteikia vartotojams idealią vartotojo patirtį beveik visuose įrenginiuose, įskaitant mobiliuosius telefonus, planšetinius kompiuterius ar stalinius kompiuterius. Interaktyvūs vaizdai gali pritaikyti svetainės foną, ekrano dydį ir matmenis. Reaktyvūs vaizdai užtikrina, kad kokybė ir proporcijos išliks. Be to, svetainė su reaguojančiais fono vaizdais įkeliama greitai.
Šiame vadove bus pateiktos instrukcijos, kaip pritaikyti fono paveikslėlius prie ekrano matmenų.
Kaip pritaikyti fono vaizdus prie ekrano matmenų?
Vaizdas gali prisitaikyti prie ekrano matmenų, vykdydamas toliau pateiktas laipsniškas instrukcijas.
1 veiksmas: sukurkite HTML struktūrą
Pirmiausia sukurkite HTML struktūrą ir pridėkite išorinį stiliaus lapą naudodami
< html >
< galva >
< nuoroda rel = 'stiliaus lapas' href = 'stilius.css' >
< titulą > Atsakingas fono vaizdas titulą >
galva >
< kūnas >
– Sritis, kurioje galima pridėti kitą turinį – >
kūnas >
html >
2 veiksmas: taikykite CSS
Dabar taikykite CSS „ kūnas ' skyrius. Pirmiausia nurodykite fono paveikslėlį. Tuo tikslu naudokite „ fono vaizdas “ ir nurodykite „ url() “ reikšmę, kurioje yra vaizdo failo adresas.
Po to naudokite „ fono vaizdas “ norėdami nurodyti vaizdo dydį, „ fono kartojimas ' ypatybę, kad nustatytumėte vaizdo pasikartojimą, ir ' fonas-priedas “, kad nustatytumėte, ar vaizdas slinktų su likusia puslapio dalimi, ar ne. Galiausiai nustatykite „ marža “ ir „ kamšalas 'į' 0 “:
kūnas {fono vaizdas: url ( 'bandomas vaizdas.jpg' ) ;
fono dydis: 100 % 100 % ;
/* Padidinkite vaizdą iki 100 % plotis ir 100 % aukščio */
fono kartojimas: nekartoti;
fono priedas: fiksuotas;
marža: 0 ;
pamušalas: 0 ;
/* Pasirenkama: fiksuotas fonas */
}
Išvestis
Tai yra išvestis prieš sudarant naršyklės langą:
Sutraukus naršyklę:
Aukščiau pateikta išvestis patvirtina, kad vaizdas pritaikė foną prie ekrano matmenų.
Išvada
Norėdami pritaikyti fono vaizdus prie ekrano matmenų, pirmiausia įtraukite „ peržiūros sritis “ galvos dalyje, kad galėtumėte valdyti matmenis ir mastelį. Tada sukurkite HTML struktūrą ir pritaikykite CSS. CSS nustatykite „ fono dydžio “ turto vertė į “ viršelis “ reikšmę, kad padidintumėte vaizdo aukštį ir plotį. Šiame straipsnyje pateiktas išsamus vadovas, kaip pritaikyti fono paveikslėlius prie ekrano matmenų.