Cum se adaugă fundaluri CSS fun la site-urile dvs.

Feb 15, 2026

să

Timpul a fost un fundal al paginii web a fost o imagine minusca a tigla - si adesea hideous, asaltati ochelari de vedere al fiecărui vizitator. Astăzi, fundalurile formează fundamentul multor design grafic online.

Această revoluție în medii de pe Web a fost determinată de avansuri în CSS. Standardele web își permit acum mai mult control, astfel încât să puteți defini cu atenție poziția unui fundal, lucrați cu gradienți și adăugați mai multe fundaluri la un singur element.

Acoperirea tuturor în această zonă ar necesita o carte, așa că am ales câteva puncte de plecare importante pentru a vă duce și link-ul de alegere ciudat pentru a explora mai departe. Bine!

Adăugați fundaluri CSS la elementele paginii web

Contextele CSS necesită fundal Proprietatea de stenogramă sau utilizarea de proprietăți mai specifice, cum ar fi (dar fără limitat la): culoare de fundal ; imagine de fundal ; Poziția de fundal ; fundal-size. ; Fundal-Repeat. ; și fundal-atașament . Acestea pot fi definite pentru fundalul paginii web (prin intermediul corp selector) sau elemente de pagină cum ar fi rubricile, divul și așa mai departe.

La nivelul cel mai de bază, ați putea folosi fundal Pentru a transforma o pagină roșu:

 corp {
 fundal: roșu;
 }

Mergând puțin mai avansat, ați putea adăuga o imagine centrată pe orizontală, 20px din partea de sus a recipientului său, nu repetată și fixată în poziție ca pe pagina Web Scrolls:

 corp {
 Fundal: URL (imagine.png) Centrul 20px No-Repeat Fixed;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — O imagine ca fundal (Notă: Evitați acest nivel scăzut de contrast în propriile dvs. desene)

Dacă ați vrut să scrieți acest lucru fără a utiliza fundal Shorthand, ar arăta astfel:

 corp {
 Imagine de fundal: URL (imagine.png);
 Poziția de fundal: centru 20px;
 Fundal-Repeat: No-Repeat;
 fundal-atașare: fix;
 }

Dacă doriți să adăugați mai multe fundaluri la un element, puteți seta valori separate în declarația CSS. Rețineți că oricare dintre elementele este specificat mai întâi se află în partea de sus a stivei, ceea ce înseamnă că va fi afișat "deasupra" alte fundaluri.

 corp {
 fundal: URL (imagine.png) Centrul 20px NO-REPEAT FIXED, URL (Image-2.png) Centrul central NO-Repeat Fixed;
 }

În acest caz, o imagine apare conform exemplului anterior și cel "de mai jos" direct în centrul zonei de conținut.

Redimensionați imaginile de fundal

Până acum, am evitat fundal-size. . Dar că este destul de important, pentru că vă permite să controlați dimensiunea unei imagini de fundal. În mod specific, puteți defini dimensiunile orizontale și verticale ale unei imagini în pixeli sau termeni procentuali, cum ar fi:

 Dimensiune fundal: 200px 50px;

Există, de asemenea, două valori de cuvinte cheie, care pot fi utilizate în schimb: conține și acoperi . Acestea sunt în general similare, oferind o modalitate de a scala o imagine în zona de conținut a unui element. Diferența este aceea că conține este conceput pentru a face o imagine cât mai mare posibil, în timp ce arată totuși toate acestea în zona de conținut (ceea ce înseamnă că de obicei obțineți lacune în jurul ei), în timp ce acoperi acoperă complet zona de conținut, dar poate duce la o imagine care nu este vizibilă. Acesta din urmă este utilizat în mod obișnuit pe site-uri care utilizează fotografii ca fundaluri.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS "conține" (sus) față de valorile "capacului" (fundul)

Rețineți că puteți adăuga fundal-size. la A. fundal definirea stenogradei - plasați-o după Poziția de fundal Valori, cu o slash înainte de separare a celor două:

 Fundal: URL (imagine.png) Centrul 20px / Conține NO-REPEAT FIX

Utilizați imagini de fundal retină de înaltă retină

Când adăugați fundaluri de retină de înaltă res, fundal-size. Este, de asemenea, utilă pentru a forța aceste imagini să apară la dimensiunea corectă.

Pentru un exemplu, imaginați-vă a div cu un ID. de siglă . Acest lucru, în mod adecvat, are un logo aplicat ca fundal în CSS. Este de 150 de pixeli pătrați, astfel încât CSS-ul de bază pe care l-ați folosi este:

 #logo {
 Lățime: 150px;
 Înălțime: 150px;
 Fundal: URL (logo.png) NO-REPEAT;
 }

S-au complicat lucrurile. Nu vrem să forțim hardware-ul mai vechi pentru a încărca imagini mai mari, astfel încât o interogare media trebuie utilizată pentru a încărca logo-ul de rezoluție mai mare numai pe hardware-ul acceptat.

 @Media (-Webkit-min-dispozitiv-pixel-raport: 2),
 (min-rezoluție: 192dpi) {
  #siglă {
   Imaginea de fundal: adresa URL ([email protected]);
  }
 }

Problema este acum imaginea @ 2x High-SRE este de 300 pixeli pătrată (deoarece are de două ori rezoluția originalului), dar folosită ca fundal pentru un recipient pătrat de 150 pixeli. Deci, în acest moment, veți vedea doar un sfert din ea.

A high-res image before a resize fix — O imagine de înaltă rezistență înainte de remediere

Acest lucru este fixat prin atribuirea unui anumit fundal-size. valoare pentru #siglă :

 #logo {
 Lățime: 150px;
 Înălțime: 150px;
 Fundal: URL (logo.png) NO-REPEAT;
 Dimensiune de fundal: 150px 150px;
 }

Logo-ul de înaltă res, acum strâns în interiorul recipientului său

O metodă mai modernă de a lucra cu rezoluții multiple de fundal și de a obține același rezultat este CSS4 Image-set :

 #logo {
 Imagine de fundal: set imagine (
  URL (logo.png) 1x,
  adresa URL ([email protected]) 2x
  );
 }

Beneficiile Image-set sunt mai simple CSS și agentul utilizator care determină imaginea care trebuie utilizată. Dezavantajul este suportul browserului - la momentul scrisului - rămâne incomplet. Vizitați această pagină de testare Pentru un mijloc rapid de a verifica modul în care browserele acceptați tariful. (Poate că mulți designeri utilizați script-uri pentru a automatiza servirea imaginilor de înaltă res .)

Lucrați cu canale și gradienți alfa

Sfat final în acest articol Fast (în termeni de tutorial Web) se referă la canalele și gradientele alfa. Când internetul a fost alimentat cu aburi, de multe ori ați avut designeri folosiți GIF-uri "Checkerboard" pentru a simula canalele alfa (fiecare alt pixel a fost transparent). Acum, doar atribuiți culorile în RGBA:

 Main {
 Fundal: RGBA (255,255,255,0,7);
 }

În exemplul de mai sus, fundalul ar fi de 70% alb, permițând tot ce este sub ea pentru a arăta. Trebuie să aveți grijă să păstrați claritatea atunci când utilizați fundaluri semi-transparente care sunt deasupra imaginilor complexe, dar ele pot fi excelente pentru adăugarea de interes vizual pentru paginile web.

Alpha channels, gradients, and some questionable colour choices — Canalele alfa, gradienții și unele opțiuni de culori discutabile

În mod similar, designerii web utilizați pentru a ieși și gifii de țiglă dacă doreau un gradient ca fundal, dar nu mai este necesar, dacă nu doriți să petreceți ca acesta din 1999. În aceste zile veți dori CSS3 Gradient liniar și gradient radial Proprietăți, pentru care definiți indicațiile și opririle de culoare.

Iată o regulă CSS cu un gradient de bază:

 H1 {{
 fundal: gradient liniar (la dreapta, RGBA (255,255,255,1), RGBA (255,255,255,0));
}

Aceasta ar fi aplicată la pozițiile la nivelul unu, oferindu-le un gradient liniar care merge de la stânga la dreapta, începând cu albul solid și se termină în alb transparent.

Folosind unghiuri și mai multe culori se oprește, puteți merge mult, mult mai departe cu gradienți. Pentru a experimenta, încercați să utilizați un Photoshop-cum ar fi CSS Gradient Generator și examinând ieșirea codului (fiind constând exemplul legat adaugă sintaxa pentru browserele mai vechi - doar apuca Gradient liniar linia pentru uz propriu).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Pe măsură ce galeria de modele CSS arată, puteți face lucruri cu adevărat cu gradienți CSS

Dacă vă place să verificați ce pot face profesioniștii web condimentați cu gradienții și fundal-size. , verificați Lea Verou's CSS3 Galeria de modele . Acolo veți găsi o mulțime de exemple live care utilizează gradienți CSS pentru a crea tot felul de modele de fundal impresionante serioase.

Și, da, există un indiciu de unde am venit în privința atacurilor oculare în unele dintre ele.Dar, ca și în cazul în care vine vorba de fundaluri web, cheia este de a vă asigura că ceea ce adăugați este relevant în contextul designului dvs. și cel mai important - acea fundal nu distrage atenția de la conținut sau nu-i luminează.

Legături similare:

Un ghid pentru a scrie mai bine CSS
Creați un aspect receptiv cu grila CSS
CSS Trucuri pentru a vă revoluționa layout-urile

Cum se adaugă fundaluri CSS fun la site-urile dvs.

Adăugați fundaluri CSS la elementele paginii web

Redimensionați imaginile de fundal

Utilizați imagini de fundal retină de înaltă retină

Lucrați cu canale și gradienți alfa

să - Cele mai populare articole

44 dintre cele mai bune comenzi rapide iPad și gesturi pentru iPados 2020

Creați un peisaj 3D în 6 pași simpli

Designer de afinitate: Cum să utilizați Pixel Persona

Construiți o aplicație de proiectare a materialelor cu unghiular 2

Cum să sculptați în cinema 4d

Cum se creează o cârpă reală CG

Transformați desenele 2D în 3D cu proiectul Felix

Creați un caracter cu realismul stilizat

Categorii