Hogyan lehet hozzáadni a szórakoztató CSS hátterét a webhelyeihez

Sep 11, 2025

kézikönyv

Az idő volt egy weboldal háttér volt egy apró csempe kép - és gyakran rémült, támadta minden látogató szemgolyóját. Ma hátterek alkotják a sok online grafikai tervezés alapját.

Ezt a forradalmat az interneten lévő háttérben a CSS előlegei hajtották végre. A webes szabványok most sokkal több irányítást biztosítanak, így gondosan meghatározhatja a háttér pozícióját, a gradiensekkel való munkát, és több hátteret adjon hozzá egyetlen elemhez.

Mindent lefedve ezen a területen egy könyvet igényelne, és így néhány fontos kiindulási pontot választottunk, hogy elmegyek, és a furcsa választási linket tovább felfedezzék. Élvezd!

Add hozzá a CSS hátterét a weblap elemekhez

A CSS háttere a háttér Részletes tulajdonság vagy konkrét tulajdonságok használata, például (de nem kizárólagosan): háttérszín ; háttérkép ; hátterület ; háttérméret ; háttér ismétlés ; és háttérkép . Ezek meghatározhatók a weboldal hátterére (a test választó) vagy oldalelemek, mint a fejlécek, a divs stb.

A legalapvetőbb szinten használhatod háttér Az oldal piros fordítása:

 test {
 Háttér: piros;
 }

Egy kicsit fejlettebb, akkor hozzáadhat egy képet, amely vízszintesen központosított, 20px a tartály tetejéről, nem ismétlődő, és a weboldal görgetései szerint rögzítve:

 test {
 Háttér: URL (Image.png) Center 20px No-Repeat fix;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Egy kép háttérként (Megjegyzés: Kerülje el ezt az alacsony szintű kontrasztot a saját tervekben)

Ha azt akarta, hogy ezt írni anélkül, hogy használná háttér Rövidítés, ez így néz ki:

 test {
 Háttérkép: URL (image.png);
 Háttérhelyzet: Center 20px;
 Háttér ismétlés: nincs ismétlés;
 Háttérképezés: fix;
 }

Ha több hátteret szeretne hozzáadni egy elemhez, akkor a CSS-nyilatkozatban vessző külön értékkészleteket veheti igénybe. Ne feledje, hogy melyik elem van megadva, először a verem tetején van, azaz megjelenik a "felett" más hátterek.

 test {
 background: url (image.png) központjában 20px no-repeat rögzített, url (image-2.png) center center no-repeat rögzített;
 }

Ebben az esetben az előző példában egy kép jelenik meg az előző példában, és az egyik "alább" közvetlenül a tartalmi terület közepén.

A háttérképek átméretezése

Eddig elkerültük háttérméret . De ez nagyon fontos, mert lehetővé teszi, hogy ellenőrizze a háttérkép méretét. Pontosabban meghatározhatja a kép vízszintes és függőleges méretét képpontokban vagy százalékos kifejezésekben, például:

 Háttér méret: 200px 50px;

Két kulcsszóérték is használható: tartalmaz és borító . Ezek nagyjából hasonlóak, ha egy elemet az elem tartalma területén egy képet kellene. A különbség az, hogy tartalmaz úgy van kialakítva, hogy a lehető legnagyobb mértékben képezzen, miközben még mindig megmutatja mindazt a tartalmi területen belül (ami azt jelenti, hogy általában réseket kapsz), míg borító Teljesen lefedi a tartalmi területet, de a kép egy része nem látható. Az utóbbit általában olyan webhelyeken használják, amelyek háttérként használják a fényképeket.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — A CSS 'tartalmazza a "fedő" (alsó) értékeket

Ne feledje, hogy hozzáadhatod háttérméret a háttér Rövidítés Meghatározás - Helyezze el a hátterület értékek, a kettő elválasztásával elválasztva:

 Háttér: URL (Image.png) Center 20px / Nem ismétlődő rögzített

Használja a nagy res retina háttérképeket

High-res retina hátterek hozzáadásával, háttérméret hasznos az ilyen képek megfelelő méretű megjelenítéséhez is.

Például képzelje el a div egy valamivel idézés nak,-nek logó . Ez megfelel a CSS-ben lévő háttérként alkalmazott logó. Ez 150 pixelter négyzet, így az Alapvető CSS-t használod:

 #logo {
 Szélesség: 150px;
 Magasság: 150px;
 Háttér: URL (logo.png) nincs ismétlés;
 }

A magas res komplikálja a dolgokat. Nem akarjuk kényszeríteni a régebbi hardvert a nagyobb képek betöltésére, így a média lekérdezést kell használni a magasabb felbontású logó betöltésére csak a támogatott hardveren.

 @Media (-webkit-min-eszköz-pixel arány: 2),
 (MIN-megoldás: 192dpi) {
  #logo {
   Háttérkép: URL ([email protected]);
  }
 }

A probléma most a 2x nagy res kép 300 pixelter négyzet (mivel az eredeti felbontásának kétszerese), de a 150 pixeles tartály hátterében használatos. Tehát ebben a pillanatban csak egynegyedét látod.

A high-res image before a resize fix — A nagy rang kép átméretezés előtt

Ezt egy adott hozzárendeléssel rögzíti háttérméret érték #logo :

 #logo {
 Szélesség: 150px;
 Magasság: 150px;
 Háttér: URL (logo.png) nincs ismétlés;
 Háttér méret: 150px 150px;
 }

A nagy res logó, most már szorosan a tartályban

A többszörös háttérfelbontásokkal való együttműködés modern módja és ugyanazon eredmény elérése a CSS4-k képkészlet :

 #logo {
 Háttérkép: Képkészlet (
  URL (logo.png) 1x,
  url ([email protected]) 2x
  );
 }

Az előnyei képkészlet egyszerűbb CSS, és a felhasználói ügynök meghatározza a képet, amelyet kell használni. A hátránya a böngésző támogatása - az írás idején - továbbra is hiányos. Látogasson el a tesztoldalra Gyors eszközt ellenőrizni, hogy a böngészők támogatják a viteldíjat. (Ez talán miért sok tervező Használja a szkripteket, hogy automatizálja a magas res képeket .)

Munka az Alpha csatornákkal és gradiensekkel

Végső tippünk ebben a lángoló gyors (a honlap bemutatójában) A cikk az alfa csatornákra és a gradiensekre vonatkozik. Ha az internet gőzös volt, akkor gyakran a tervezői használják a "Checkerboard" GIF-eket az Alpha csatornák szimulálásához (minden más pixel átlátszó). Most csak hozzárendelsz színeket RGBA-ban:

 Main {
 Háttér: RGBA (255,255,255,0,7);
 }

A fenti példában a háttér 70 százalékos fehér lenne, amely lehetővé teszi, hogy az alatta látható legyen. Ügyeljen arra, hogy az egyértelmű képeket, amelyek a bonyolult képeket meghaladó félig átlátszó háttereket használnak, de nagyszerűek lehetnek a vizuális érdeklődéshez a weboldalakhoz.

Alpha channels, gradients, and some questionable colour choices — Alpha csatornák, gradiensek és néhány megkérdőjelezhető színválasztás

Hasonlóképpen, a webes tervezők használt kiadási és csempe GIF, ha akarnák, gradiens, mint a háttér, de ez már nem szükséges sem, kivéve, ha azt szeretnénk, hogy fél, mint ez 1999 Ezek a napok, akkor hiányolom CSS3 lineáris gradiens és sugárirányú tulajdonságok, amelyek meghatározzák az utasításokat és a színmegállókat.

Itt van egy CSS szabály egy alapvető gradienssel:

 H1 {
 Háttér: lineáris gradiens (jobbra, RGBA (255,255,255,1), RGBA (255,255,255,0));
}

Ezt alkalmazzák az egyszintű fejlécekre, így egy lineáris gradiens, amely balról jobbra megy, szilárd fehérből és átlátszó fehérben végződik.

A szögek és több színmegállók használata sokkal, sokkal tovább haladhat a gradiensekkel. Kísérletezni, próbálja meg használni egy Photoshop-szerű CSS gradiens generátor és vizsgálja meg a kódkimenetet (mivel a kapcsolt példa figyelembevonja a szintaxist az idősebb böngészők számára - csak megragadja a lineáris gradiens vonal a saját használatához).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Mivel a CSS-minták galériája azt mutatja, hogy igazán divatos dolgokat tehetsz CSS gradiensekkel

Ha megvizsgálja, milyen fűszerezett webes szakemberek tehetnek a gradiensekkel és háttérméret , nézze meg Lea Verou-t CSS3 Minták Galéria . Ott megtalálja az élő példákat, amelyek a CSS-gradienseket használják, hogy mindenféle komolyan lenyűgöző háttérmintákat hozzanak létre.

És igen,van egycsipetnyiaholbejöttünkkapcsolatosszemgolyótámadásoknéhányközülük.De mint minden, amikor a webes hátterek, a kulcs az, hogy biztosítsuk, hogy mit ad hozzá, releváns a tervezés és a - legfontosabb -, hogy a hátterek nem zavarják a tartalmat, vagy olvashatják.

Kapcsolódó linkek:

Útmutató a jobb CSS írásához
Hozzon létre egy érzékeny elrendezést a CSS-rács segítségével
CSS trükkök, hogy forradalmasítsák az elrendezéseket

Hogyan lehet hozzáadni a szórakoztató CSS hátterét a webhelyeihez

Add hozzá a CSS hátterét a weblap elemekhez

A háttérképek átméretezése

Használja a nagy res retina háttérképeket

Munka az Alpha csatornákkal és gradiensekkel

kézikönyv - Most Popular Articles

A gravitációs vázlat használata

A chart.js felhasználása az adatok interaktív diagramokká történő bekapcsolásához

A fájl előkészítése a nyomtatáshoz

Kezdje az Express.js-t

Kezdjük a rozsda

Design egy lejátszható avatar videojátékhoz

A nedves figura rajzolása

Kor egy fénykép a Photoshop CC-ben

Kategóriák

Hogyan lehet hozzáadni a szórakoztató CSS ​​hátterét a webhelyeihez

Add hozzá a CSS hátterét a weblap elemekhez

A háttérképek átméretezése

Használja a nagy res retina háttérképeket

Munka az Alpha csatornákkal és gradiensekkel

kézikönyv - Most Popular Articles

Kategóriák

Hogyan lehet hozzáadni a szórakoztató CSS hátterét a webhelyeihez