Jei tu kuriant svetainę, jums gali būti įdomu sužinoti, kaip sukurti fiksuotą fono paveikslėlį ar vandens ženklą tinklalapyje. Tai yra įprastas dizaino gydymas, kuris internete buvo populiarus gana ilgą laiką. Tai yra patogus efektas, kurį galite turėti savo interneto dizaino triukų krepšyje.
Jei to dar nepadarėte anksčiau arba bandėte anksčiau be laimės, procesas gali atrodyti bauginantis, bet iš tikrųjų tai nėra labai sunku. Naudodamiesi šia trumpa pamoka, naudodamiesi CSS, gausite informaciją, kurios jums reikia norint išmokti techniką per kelias minutes.
Pradžia
Fono paveikslėliai arba vandens ženklai (kurie iš tikrųjų yra tik labai šviesūs fono vaizdai) turi spausdinto dizaino istoriją. Dokumentuose jau seniai yra vandens ženklų, kad jų nebūtų galima kopijuoti. Be to, daugelyje skrajučių ir brošiūrų naudojami dideli fono paveikslėliai kaip spausdinto kūrinio dizaino dalis. Interneto dizainas jau seniai pasiskolino stilių iš spausdinimo, o fono paveikslėliai yra vienas iš šių skolintų stilių.
Šiuos didelius fono paveikslėlius lengva sukurti naudojant šiuos tris CSS stilius savybės:
- fonas-vaizdas
- fonas pakartoti
- prisirišimas prie fono
- fono dydis
Fonas-vaizdas
Norėdami nustatyti vaizdą, kuris bus naudojamas kaip jūsų vandens ženklas, naudosite fono paveikslėlį. Šis stilius paprasčiausiai naudoja failo kelią įkelti paveikslėlį, kurį turite savo svetainėje, greičiausiai kataloge pavadinimu vaizdai.
fono paveikslėlis: url (/images/page-background.jpg);
Svarbu, kad pats vaizdas būtų šviesesnis ar skaidresnis nei įprastas vaizdas. Tai sukurs tai "vandens ženklas"išvaizda, kurioje pusiau skaidrus vaizdas slypi už teksto, grafikos ir kitų pagrindinių tinklalapio elementų. Be šio veiksmo foninis vaizdas konkuruos su jūsų puslapyje esančia informacija ir apsunkins jo skaitymą.
Galite reguliuoti fono paveikslėlį bet kurioje redagavimo programoje, pvz Adobe Photoshop.
Fonas-pakartojimas
Fono pakartojimo ypatybė ateina paskui. Jei norite, kad jūsų vaizdas būtų didelis vandens ženklo stiliaus grafikas, naudokite šią ypatybę, kad tas vaizdas būtų rodomas tik vieną kartą.
fonas pakartoti: ne kartoti;
Be ne kartoti ypatybė, pagal numatytuosius nustatymus vaizdas vėl ir vėl kartosis puslapyje. Tai nepageidaujama daugumoje šiuolaikinių tinklalapių dizainų, todėl šį stilių reikėtų laikyti esminiu jūsų CSS.
Fono priedas
Fono prisegimas yra savybė, kurią pamiršta daugelis interneto dizainerių. Naudojant jį, fono paveikslėlis bus fiksuotas vietoje, kai naudojate fiksuotas nuosavybė. Tai paverčia tą vaizdą vandens ženklu, kuris yra fiksuotas puslapyje.
Numatytoji šios ypatybės vertė yra slinkti. Jei nenurodysite fono priedo vertės, fonas slinks kartu su likusia puslapio dalimi.
pritvirtinimas prie fono: fiksuotas;
Fono dydis
Fono dydis yra naujesnė CSS nuosavybė. Tai leidžia nustatyti fono dydį pagal peržiūros sritį, kurioje jis yra peržiūrimas. Tai labai naudinga reaguojančios svetainės kad bus rodomi skirtingais dydžiais skirtinguose įrenginiuose.
fono dydis: viršelis;
Dvi naudingos vertės, kurias galite naudoti šiai nuosavybei, yra:
- Viršelis - Mastelis keičia foną, kad būtų rodomas visas plotis arba visas aukštis. Tai reiškia, kad kai kurios vaizdo dalys gali būti nerodomos ekrane, bet bus padengta visa sritis.
- Turi - Mastelis atvaizdą, kad stiliaus plote būtų rodomas visas plotis ir aukštis. Vaizdas nėra nukirptas, tačiau trūkumas yra tas, kad vaizdas negali padengti zonos dalių.
CSS įtraukimas į savo puslapį
Supratę anksčiau nurodytas savybes ir jų vertes, galite pridėti šiuos stilius prie savo svetainės.
Jei kuriate vieno puslapio svetainę, pridėkite šiuos duomenis prie savo tinklalapio GALVĖS. Pridėkite jį prie išorinio stiliaus lapo CSS stilių, jei kuriate kelių puslapių svetainę ir norite pasinaudoti išorinio lapo pranašumais.
Pakeiskite fono paveikslėlio URL, kad jis atitiktų konkretų failo pavadinimą ir failo kelią, susijusį su jūsų svetaine. Atlikite kitus tinkamus pakeitimus, kad atitiktų ir jūsų dizainą, ir turėsite vandens ženklą.
Taip pat galite nurodyti poziciją
Jei norite vandenženklį įdėti į tam tikrą savo tinklalapio vietą, taip pat galite tai padaryti. Pvz., Galbūt norėsite, kad vandens ženklas būtų puslapio viduryje arba galbūt apatiniame kampe, o ne viršutiniame kampe, kuris yra numatytasis.
Norėdami tai padaryti, pridėkite fono padėties ypatybę prie savo stiliaus. Taip vaizdas bus patalpintas tiksliai toje vietoje, kurioje norėtumėte, kad jis pasirodytų. Norėdami pasiekti tą pozicionavimo efektą, galite naudoti taškų vertes, procentus ar lygiuotes.
fonas-padėtis: centras;