Daca esti proiectarea unui site web, s-ar putea să fiți interesat să aflați cum să creați o imagine de fundal fixă sau un filigran pe o pagină web. Acesta este un tratament obișnuit de proiectare care a fost popular online de ceva timp. Este un efect la îndemână pe care îl aveți în punga de trucuri de design web.
Dacă nu ați făcut acest lucru înainte sau l-ați încercat anterior fără noroc, procesul ar putea părea intimidant, dar de fapt nu este deloc foarte dificil. Cu acest scurt tutorial, veți obține informațiile de care aveți nevoie pentru a învăța tehnica în câteva minute folosind CSS.
Noțiuni de bază
Imaginile de fundal sau filigranele (care sunt de fapt doar imagini de fundal foarte ușoare) au o istorie în designul tipărit. Documentele au inclus mult timp filigranele pentru a preveni copierea acestora. În plus, multe pliante și broșuri utilizează imagini de fundal mari ca parte a designului piesei tipărite. Designul web a împrumutat mult timp stiluri de tipărit, iar imaginile de fundal sunt unul dintre aceste stiluri împrumutate.
Aceste imagini de fundal mari sunt ușor de creat folosind următoarele trei Stil CSS proprietăți:
- imagine de fundal
- fundal-repetare
- atașament de fundal
- dimensiunea fundalului
Imagine de fundal
Veți utiliza imaginea de fundal pentru a defini imaginea care va fi folosită ca filigran. Acest stil folosește pur și simplu o cale de fișier pentru a încărca o imagine pe care o aveți pe site-ul dvs., probabil într-un director numit imagini.
imagine de fundal: url (/images/page-background.jpg);
Este important ca imaginea în sine să fie mai deschisă sau mai transparentă decât o imagine normală. Acest lucru va crea acel "filigran„arată în care o imagine semitransparentă se află în spatele textului, a graficii și a altor elemente principale ale paginii web. Fără acest pas, imaginea de fundal va concura cu informațiile de pe pagina dvs. și va face dificilă citirea.
Puteți regla imaginea de fundal în orice program de editare, cum ar fi Adobe Photoshop.
Fundal-Repetați
Urmează proprietatea de repetare a fundalului. Dacă doriți ca imaginea dvs. să fie un grafic mare în stil filigran, ați utiliza această proprietate pentru ca imaginea respectivă să fie afișată o singură dată.
background-repeat: no-repeat;
Fara fără repetare proprietate, valoarea implicită este aceea că imaginea se va repeta de mai multe ori pe pagină. Acest lucru nu este de dorit în majoritatea proiectelor de pagini web moderne, astfel încât acest stil ar trebui considerat esențial în CSS.
Fundal-Atașament
Background-attachment este o proprietate de care uită mulți designeri web. Folosirea acesteia vă menține imaginea de fundal fixă atunci când utilizați fix proprietate. Este ceea ce transformă acea imagine într-un filigran fixat pe pagină.
Valoarea implicită pentru această proprietate este sul. Dacă nu specificați o valoare de atașament de fundal, fundalul va derula împreună cu restul paginii.
background-attachment: fix;
Dimensiunea fundalului
Background-size este o proprietate CSS mai nouă. Vă permite să setați dimensiunea unui fundal în funcție de fereastra în care este vizualizat. Acest lucru este foarte util pentru site-uri web receptive care se va afișa la diferite dimensiuni pe diferite dispozitive.
fundal-dimensiune: coperta;
Două valori utile pe care le puteți utiliza pentru această proprietate includ:
- Acoperi - Scalează fundalul astfel încât să fie afișată lățimea totală sau înălțimea totală. Aceasta înseamnă că unele părți ale imaginii pot să nu apară pe ecran, dar că întreaga zonă va fi acoperită.
- Conține - Redimensionează imaginea astfel încât atât lățimea, cât și înălțimea să fie afișate în zona de stil. Imaginea nu este tăiată, dar dezavantajul este că anumite părți ale zonei pot să nu fie acoperite de imagine.
Adăugarea CSS la pagina dvs.
După ce înțelegeți proprietățile de mai sus și valorile lor, puteți adăuga aceste stiluri pe site-ul dvs. web.
Adăugați următoarele la HEAD-ul paginii dvs. web dacă creați un site cu o singură pagină. Adăugați-o la stilurile CSS ale unei foi de stil externe dacă creați un site cu mai multe pagini și doriți să profitați de puterea unei foi externe.
Schimbați adresa URL a imaginii de fundal pentru a se potrivi cu numele fișierului și calea fișierului relevante pentru site-ul dvs. Efectuați orice alte modificări adecvate pentru a se potrivi și designului dvs. și veți avea un filigran.
Puteți specifica poziția, prea
Dacă doriți să plasați filigranul într-o anumită locație de pe pagina dvs. web, puteți face și asta. De exemplu, este posibil să doriți filigranul în mijlocul paginii sau poate în colțul inferior, spre deosebire de colțul de sus, care este implicit.
Pentru a face acest lucru, adăugați proprietatea de poziție de fundal la stilul dvs. Aceasta va plasa imaginea în locul exact în care ați dori să apară. Puteți utiliza valorile pixelilor, procentele sau aliniamentele pentru a obține acel efect de poziționare.
fundal-poziție: centru;