Vykdyti techniką su CSS
Jei kuriate svetainę, galbūt jus domina, kaip kurti fiksuotą foninį vaizdą ar vandens ženklą tinklalapyje. Tai yra bendras dizaino gydymas, kuris ilgą laiką buvo populiarus internete. Tai yra patogus efektas, kad jūsų interneto dizaino maiše gudrybės.
Jei dar to nepadarėte arba bandėte anksčiau be sėkmės, procesas gali atrodyti bauginantis, bet tai iš tikrųjų nėra labai sunku. Naudodamiesi šia trimačia pamoka, gausite reikalingą informaciją, kad per kelias minutes pasinaudotų CSS metodu.
Pradžia
Fono paveikslėliai ar vandenženkliai (kurie yra tik labai lengvi fono vaizdai) turi istoriją spausdintoje formoje. Dokumentuose jau seniai buvo įtraukiami vandens ženklai, kad jie nebūtų nukopijuoti. Be to, daugelis skrajutė ir brošiūros naudoja didelius fono vaizdus kaip dalį spausdinto gabalo dizaino. Web dizainas ilgai skolina stilius iš spausdinimo ir fono vaizdai yra vienas iš šių skolintų stilių.
Šiuos didelius fono vaizdus lengva sukurti naudodamas šias tris CSS stiliaus savybes:
- fono paveikslėlis
- fono kartojimas
- fono priedas
- fono dydis
Fono paveikslėlis
Jūs naudosite fono paveikslėlį, kad apibrėžtumėte vaizdą, kuris bus naudojamas kaip jūsų vandenženklis. Šis stilius tiesiog naudoja failo kelią, kad įkelti jūsų svetainėje esantį paveikslėlį, greičiausiai kataloge "vaizdai".
fono paveikslėlis: url (/images/page-background.jpg);
Svarbu, kad pats vaizdas būtų lengvesnis ar skaidresnis nei įprastas vaizdas. Tai sukurs "vandenženklio" išvaizdą, kuriame pusiau permatomas vaizdas yra už teksto, grafikos ir kitų pagrindinių tinklalapio elementų. Be šio žingsnio, fono paveikslėlis konkuruoja su jūsų puslapyje pateikta informacija ir sunku jį skaityti.
Galite koreguoti fono vaizdą bet kurioje redagavimo programoje, pvz., "Adobe Photoshop".
Fono kartojimas
Fono pakartotinis turtas ateina toliau. Jei norite, kad jūsų vaizdas būtų didelio vandens ženklo stiliaus grafika, naudokite šią nuosavybę, kad šis vaizdas būtų rodomas tik vieną kartą.
fono kartojimas: ne kartoti;
Be "never-repeat" nuosavybės, pagal nutylėjimą yra tas, kad vaizdas vėl ir vėl kartosis puslapyje. Tai yra nepageidautinas daugelyje šiuolaikinių interneto puslapių dizainų, todėl šis stilius turėtų būti laikomas svarbiu jūsų CSS.
Fono priedas
Fono priedas yra turtas, kurį daugelis interneto dizainerių pamiršo. Naudodamas tai, fono paveikslėlis fiksuojamas vietoje, kai naudojate "fiksuotą" nuosavybę. Būtent tai paverčia šį vaizdą į vandenženklį, kuris yra nustatytas puslapyje.
Numatytoji šio turto reikšmė yra "slinktis". Jei nenurodysite fono priedo vertės, fonas bus slenkamas kartu su likusiu puslapiu.
fono priedas: fiksuotas;
Fono dydis
Fono dydis yra naujesnė CSS nuosavybė. Tai leidžia jums nustatyti fono dydį, atsižvelgiant į peržiūros sritį, kurioje jis žiūri. Tai labai naudinga jautrioms svetainėms , kurios skirtinguose įrenginiuose rodys skirtingus dydžius.
fono dydis: viršelis;
Du naudingos vertės, kurias galite naudoti šiam turtui, yra šios:
- Dangtelis . Sumažina foną, todėl rodomas visas plotis arba pilnas aukštis. Tai reiškia, kad kai kurios vaizdo dalies dalys gali nebūti rodomos ekrane, bet visa teritorija bus uždengta.
- "Contain" - "Sumažina vaizdą", todėl vaizdas yra rodomas plote ir aukštyje. Vaizdas nėra iškirptas, bet neigiama yra tai, kad nuotraukos dalys gali būti neapdorotos.
CSS pridėjimas prie puslapio
Po to, kai suprantate pirmiau minėtas savybes ir jų vertybes, galite pridėti šiuos stilius į savo svetainę.
Jei sukūrėte vieno puslapio svetainę, pridėkite šią nuorodą į HEAD savo tinklalapį. Pridėkite jį prie išorinio stiliaus lapo CSS stilių, jei pastatote kelių puslapių svetainę ir norite pasinaudoti išorinio lapo galia.