Patarimai, kaip sukurti tinklalapio foninį vandens ženklą

Vykdykite techniką naudodami CSS

Banguotos linijos, einančios iš centro

bellanatella / Getty Images





Jei tu svetainės kūrimas , galbūt norėsite sužinoti, kaip tinklalapyje sukurti fiksuotą fono paveikslėlį arba vandenženklį. Tai įprastas dizaino metodas, kuris ilgą laiką buvo populiarus internete. Tai patogu turėti savo interneto dizaino gudrybių krepšyje.

Jei to nepadarėte anksčiau arba bandėte anksčiau be sėkmės, procesas gali atrodyti bauginantis, tačiau iš tikrųjų tai nėra labai sunku. Naudodamiesi šia trumpa pamoka, per kelias minutes gausite informacijos, kurios reikia norint išmokti techniką naudojant CSS.



Darbo pradžia

Fono vaizdai arba vandens ženklai (kurie iš tikrųjų yra tik labai šviesūs fono vaizdai) turi spausdinimo istoriją. Dokumentuose jau seniai yra vandens ženklai, kad jie nebūtų kopijuojami. Be to, daugelyje skrajučių ir brošiūrų naudojami dideli fono vaizdai kaip spausdinto kūrinio dizaino dalis. Interneto dizainas jau seniai pasiskolino stilius iš spaudinių, o fono paveikslėliai yra vienas iš šių pasiskolintų stilių.

Šiuos didelius fono vaizdus lengva sukurti naudojant šiuos tris CSS stilius savybės:



  • fono vaizdas
  • fono kartojimas
  • fonas-priedas
  • fono dydžio

Fonas-Vaizdas

Naudosite fono vaizdą norėdami apibrėžti vaizdą, kuris bus naudojamas kaip vandens ženklas. Šis stilius tiesiog naudoja failo kelią, kad įkeltų vaizdą, kurį turite savo svetainėje, greičiausiai kataloge pavadinimu vaizdai .

|_+_|

Svarbu, kad pats vaizdas būtų šviesesnis arba skaidresnis nei įprastas vaizdas. Taip bus sukurta vandens ženklas Išvaizda, kurioje už teksto, grafikos ir kitų pagrindinių tinklalapio elementų yra pusiau permatomas vaizdas. Be šio veiksmo fono paveikslėlis 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 - Pakartokite

Toliau pateikiama fono kartojimo ypatybė. Jei norite, kad jūsų vaizdas būtų didelis vandens ženklo stiliaus grafikas, naudokite šią savybę, kad vaizdas būtų rodomas tik vieną kartą.



|_+_|

Be nekartoti ypatybę, pagal nutylėjimą vaizdas bus kartojamas puslapyje vėl ir vėl. Tai nepageidautina daugelyje šiuolaikinių tinklalapių dizaino, todėl šis stilius turėtų būti laikomas esminiu jūsų CSS.

Fonas-Priedas

Fono priedas yra savybė, apie kurią daugelis interneto dizainerių pamiršta. Naudojant jį, jūsų fono vaizdas išliks fiksuotas, kai naudojate fiksuotas nuosavybė. Būtent tai paverčia tą vaizdą vandens ženklu, pritvirtintu puslapyje.



Numatytoji šios nuosavybės vertė yra slinkti . Jei nenurodysite fono priedo reikšmės, fonas slinks kartu su likusia puslapio dalimi.

|_+_|

Fonas-dydis

Fono dydis yra naujesnė CSS nuosavybė. Tai leidžia nustatyti fono dydį pagal peržiūros sritį, kurioje jis peržiūrimas. Tai labai naudinga reaguojančios svetainės kurie bus rodomi skirtingais dydžiais skirtinguose įrenginiuose .



|_+_|

Dvi naudingos vertės, kurias galite naudoti šiai nuosavybei, yra šios:

    Viršelis– Pakeičia fono mastelį, kad būtų rodomas visas plotis arba visas aukštis. Tai reiškia, kad kai kurios vaizdo dalys gali nepasirodyti ekrane, bet bus padengta visa sritis.Sudėtyje– Pakeičia vaizdą taip, kad stilizuojamoje srityje būtų rodomas visas plotis ir aukštis. Vaizdas nėra nupjautas, tačiau minusas yra tas, kad dalies ploto vaizdas gali neuždengti.

CSS pridėjimas prie savo puslapio

Kai suprasite pirmiau nurodytas ypatybes ir jų reikšmes, galite įtraukti šiuos stilius į savo svetainę.



Jei kuriate vieno puslapio svetainę, į savo tinklalapio HEAD pridėkite toliau pateiktą informaciją. Pridėkite jį prie išorinio stiliaus lapo CSS stilių, jei kuriate kelių puslapių svetainę ir norite pasinaudoti išorinio lapo galia.

Pakeiskite fono vaizdo URL, kad jis atitiktų konkretų failo pavadinimą ir failo kelią, kuris yra susijęs su jūsų svetaine. Atlikite bet kokius kitus tinkamus pakeitimus, kad jie taip pat atitiktų jūsų dizainą, ir turėsite vandens ženklą.

Taip pat galite nurodyti poziciją

Jei norite įdėti vandens ženklą konkrečioje savo tinklalapio vietoje, galite tai padaryti. Pavyzdžiui, galbūt norėsite, kad vandens ženklas būtų puslapio viduryje arba 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 toje vietoje, kurioje norite, kad jis būtų rodomas. Norėdami pasiekti tokį padėties nustatymo efektą, galite naudoti pikselių reikšmes, procentus arba lygiavimą.

|_+_|