Ablakok.  Vírusok.  Jegyzetfüzetek.  Internet.  hivatal.  Segédprogramok.  Drivers

Szerintem nincs olyan oldal, ahol ne használnák az ingatlant css háttér. Úgy tűnik, mi lehet egyszerűbb ennél a tulajdonságnál? De nem, lehetőségei sokkal szélesebbek, mint egy kép vagy szín oldal hátterének szokásos beállítása. Néhányan ismerősek lesznek, mások pedig sokak számára újak. Mindenesetre hasznos lesz alaposan megismerni a háttér működését.

A CSS3 sok újdonságot hozott az ingatlanba, mint például az átlátszóság, több kép háttérként való beállítása, de erről alább szó lesz, de először a tulajdonság alapjaira térünk ki. háttér.

háttérszín

Biztos vagyok benne, hogy már többször elvégezte a háttérszín hozzárendelését. Ez többféle jelöléssel is megtehető: normál (a színnév használatos), hexadecimális vagy RGB jelöléssel. Mindegyik típus egyenértékű, használja azt, amelyik a legjobban tetszik. Igyekszem a legrövidebb verziót használni, és az érzékelés szempontjából egyszerűbb, a stílusfájl pedig kicsit kisebb méretű.

P (háttérszín: piros;) p (háttérszín: #f00;) p (háttérszín: #ff0000;) p (háttérszín: rgb(255, 0, 0;))

A CSS3 bevezeti az átlátszóság támogatását, így hozzáadhatjuk a színünkhöz, így:

P (háttérszín: rgba(255, 0, 0, 0,5);)

Az utolsó számjegy az átlátszóságot 50%-ra állítja. Az átlátszóság értékét 0-tól állíthatja be (teljesen átlátszó háttér) 1-re (teljesen átlátszatlan).

háttérkép

Ezt a tulajdonságot is nagyon gyakran használják, lehetővé teszi, hogy képet rendeljen a háttérhez. A CSS3 lehetőséget ad több kép hozzárendelésére a háttérhez, amelyek mindegyike egyfajta réteget hoz létre, így minden következő átfedésben van az előzővel. Miért lehet ez hasznos? Minden nagyon egyszerű - tegyük fel, hogy apró dolgokat kell csavaroznia a webhely minden sarkába. Többé-kevésbé folyékony elrendezés esetén egyetlen kép használata nem lehetséges. Ezért készítünk 4 „réteget”, minden képet a saját sarkába helyezünk, és ennyi, a probléma megoldva

Törzs (háttér-kép: url("kép1"), url("kép2"), url("kép3"))

Ha egy képet kell a háttérhez rendelni, akkor csak az elsőt hagyjuk a kódban, ez szerintem érthető.
Ha bármilyen képet használ háttérként, két szabályt kell figyelembe venni:

  • állítson be kontrasztos háttérszínt arra az esetre, ha a felhasználó valamilyen okból nem látja a képet. A képek megjelenítését gyakorlatilag letiltja, forgalmat takarít meg.
  • ne használjon háttérképet annak közvetítésére fontos információ. A fent említett ok miatt előfordulhat, hogy a felhasználó nem látja.

A több háttérkép támogatása meglehetősen kiterjedt. Minden böngésző, még az IE8 is, támogatja ezt a tulajdonságot.

Sziasztok, a blogoldal kedves olvasói. Ma megvizsgálunk öt CSS-szabályt, amelyek lehetővé teszik a HTML bármely elemének hátterének beállítását - háttérpozíció (kép, ismétlés, szín, melléklet). Nos, ne felejtsük el megemlíteni a Háttér összetett szabályt.

Ebben nincs semmi nehéz, de vannak bizonyos finomságok és árnyalatok, amelyeket tudnia kell egy kész sablonról (ne feledje, hogy ez segít megnyitni bármely terv teljes történetét).

Hadd emlékeztesselek még egyszer arra, hogy ez a cikk egy sorozat része, és a legjobb lenne, ha a stílusjelölést az elejétől kezdené el tanulmányozni, mégpedig egy cikkből, amely arról szól, hogy mi az a CSS és mivel eszik, nos, akkor kövesse a sorrendet. a referenciakönyvben található. Bár mindenesetre ez rajtad múlik, de most beszéljünk a háttér beállításáról.

Szín, háttérszín és háttér-kép

Először nézzük meg, hogyan HTML szín elemek felhasználásával css színszabályok. Valójában itt minden egyszerű. A szintaxis teljesen normális, és beállíthatja a színt a hiperszöveg jelölőnyelvének megfelelően. Emlékszel, a hash jel után (hash - "#fe35a3"), vagy három számjegy segítségével, ha az első egyezik a második értékével, a harmadik a negyedikkel, nos és az ötödik, a hatodikkal (az "#aa33ff" színkódot "a3f"-ként lehet rövidíteni).

Ugyanazok a színek HTML-ben és css kódot lehetséges lesz szavak formájában ábrázolni (például "piros"), de leggyakrabban a hexadecimális kódot használják:

Szín: #303

Példaként ezt a kis bekezdést a fenti színnel színeztem (#303). Most kissé eltér az összes többi bekezdés színétől (sötétebb), amely #555-re van beállítva az általam használt WordPress téma CSS-fájljában. De a szín beállítása a színen keresztül meglehetősen egyszerű, de a háttérrel ez egy kicsit bonyolultabb lesz.

Így, háttérhez css-ben megfelel öt szabálynak, amelyek kívánt esetben egy csapattá összevonhatók. Megtekintésükhöz lépjen a W3C aktuális specifikációs oldalára, és keressen ott valamit a Háttér szóval:

  1. háttérszín – ez a szabály bármely HTML-elem háttérszínét állítja be. Akár a kódot, akár az árnyalat nevét használhatod benne, pl. minden pontosan olyan, mint a szín használatakor.
  2. háttérkép - vele egy képet használhatsz háttérként (de mindenképpen olvass el róla, mert a nehéz képek lelassítják az oldal betöltődését), amelynek elérési útja az url () funkcióban lesz feltüntetve.

    Ha megnézed a specifikációt, látni fogod alapértelmezett háttérszín bármely elem átlátszó lesz (a szabály alapértelmezett értéke "background-color:transparent"). Igaz, az elemekben alapból nem lesz átlátszó, mert. ezek rendszerelemek, és minden más számukra, és különbözik a hagyományos hiperszöveg jelölőnyelvi címkéktől.

    A háttérszín színe szabványos (hat vagy három hexadecimális számjegy vagy egy szó):

    Háttérszín: #FEFCDE

    Például ennek a bekezdésnek a háttere pontosan a háttérszínen keresztül van beállítva a fent megadott színkóddal.

    A többi négy CSS-szabály csak erre vonatkozik háttér kép, amely bármely HTML-elemhez beállítható, és kívánt esetben pontosan pozícionálható. A használni kívánt grafikus fájlt a segítségével lehet megadni háttérkép.

    Ha megnézi a stílusjelölő nyelv specifikációját, látni fogja, hogy a háttérkép alapértelmezés szerint "nincs" (azaz nem használ háttérképet). Nos, ha még mindig szüksége van rá, akkor az url () funkcióban meg kell adnia az elérési utat:

    Background-image:url(https://site/image/comment_top_focus.gif);

    Például ehhez a bekezdéshez egy háttérrel rendelkező grafikus fájlt használtam, amelynek elérési útját fentebb leírtam. Látható, hogy az ehhez a bekezdéshez fenntartott teljes területet egy ismétlődő kép borítja, amely az eredetiben így néz ki:

    Azok. ha csak egy háttérkép-szabályt használunk, amely megadja a grafikus fájl elérési útját, akkor ez a kép függőlegesen és vízszintesen is reprodukálva lesz mindaddig, amíg le nem fedi az adott HTML-elemhez a weboldalon lefoglalt teljes területet (a példánkban ez egy bekezdés). Miért történik ez?

    Background-repeat – háttérkép ismétlése

    Igen, mert a CSS-szabályhoz nem írtunk értéket háttér-ismétlés, ami azt jelenti, hogy az alapértelmezett értéket fogja használni. A specifikációt nézve azt találjuk, hogy ez az érték a "repeat"-nek felel meg (a kép ismétlése minden tengelyen). A válasz magától jött.

    Ezért a háttér-ismétléssel megtehetjük kezelheti a háttérkép ismétlődéseit. Ennek a szabálynak csak négy értéke lehet:


    Background-position – a háttér helyzete

    Felmerül a kérdés, hogy el lehet-e távolítani a háttérképet az elem méretét korlátozó terület bal felső sarkától. Természetesen megteheti, és erre a célra külön szabály van háttér pozíció:

    A CSS specifikációt tekintve világossá válik, hogy miért van az alapértelmezett háttérkép pontosan a HTML elemterület bal felső széléhez nyomva. Mivel a "0% 0%" az alapértelmezett érték a háttérpozíció szabályhoz.

    Nos, ha ez a szabály nincs kifejezetten beállítva az elemre (mint a mi esetünkben), akkor a böngésző kiválasztja az értékét, ami az alapértelmezett specifikációban elfogadott (megjegyzem, a CSS koordináta tengelyei csak a bal felső széltől jelennek meg a terület elem).

    A specifikációból az is látható, hogy mind a relatív (százalékos), mind az abszolút értékek (például ) használhatók a háttérkép pozicionálására a háttérpozíció használatával. Nos, olyan szavakat is használhat, amelyek megfelelnek bizonyos digitális értékeknek. De először a dolgok.

    A háttérkép helyzetének beállításakor abszolút mértékegységeket használva A háttérpozíció a következő elv alapján határozza meg végső pozícióját:

    Azok. a böngésző kiszámítja a megadott eltolásokat az X és Y tengely mentén annak a területnek az origójától, amelyben az objektum el van helyezve, a kép origójáig. Például ebben a bekezdésben a háttérképet a háttérpozíción keresztül helyeztem el a következő CSS-szabályok segítségével:

    Background-image:url(https://website/image/logo.svg?6); background-repeat:no-repeat; háttérpozíció: 400 képpont 25 képpont;

    Felhívjuk figyelmét, hogy benne van ez az eset a nézet közepéhez lesz igazítva, nem pedig az ezeknek a bekezdéseknek fenntartott terület közepéhez. Nyilvánvaló, hogy a valóságban nem valószínű, hogy a háttérkép ilyen elhelyezését használják.

    Ha azonban rögzített háttérpozíciót állít be az olyan elemekhez, mint a törzs vagy a HTML (azaz a teljes weboldalt lefedő címkékben), akkor ez a kép mindig látható lesz a nézetablakban, és így CSS tulajdonság háttér-csatolás modern blokk elrendezésben.

    Van még néhány Előregyártott szabály háttér, amely lehetővé teszi, hogy a fent leírt öt szabályt egy üvegben egyesítse. Ezenkívül a kombinált verzió mind az öt értéke bármilyen sorrendben és mennyiségben használható (egyediek, és a böngésző nem fogja összekeverni őket). Mindent, amit nem ad meg kifejezetten, a böngésző figyelembe vesz egyenlő az értékkel alapértelmezett.

    Png) ismétlés nélküli 50%;

    A példában látható összeállítási szabályt alkalmazzuk erre a bekezdésre az érthetőség kedvéért. Nem lett szép, de nem is ez a lényeg. Ebben a bekezdésben a háttér kitöltése a furcsa sárga szín, valamint a Liveinternet logó képe, a bekezdés közepéhez igazítva. Mert a háttér-csatolási szabályhoz nincs érték beállítva, majd a görgetést (alapértelmezett) használja.

    Ha valamelyik elemnél csak a színnel való kitöltést szeretnéd beállítani, és nem foglalkozol a háttérképpel, akkor megteheted helyette:

    Háttérszín: #FEFCDE

    ír:

    Háttér: #FEFCDE

    Az előregyártott szabály összes többi értékét alapértelmezés szerint veszi a rendszer, és ez az, amire szüksége volt.

    Sok szerencsét! Hamarosan találkozunk a blogoldalak oldalán

    Lehet, hogy érdekel

    Listastílus (típus, kép, pozíció) – Css-szabályok a listák HTML-kódban való megjelenésének testreszabásához A táblázatok, listák és egyéb sorok háttérszínének megváltoztatása Html elemek az oldalon az n-edik gyermek álosztályt használva
    Pozíció (abszolút, relatív és rögzített) – a HTML-elemek elhelyezésének módjai a CSS-ben (bal, jobb, felső és alsó szabályok)
    Float and clear CSS - blokk elrendezési eszközök
    Pozicionálás Z-index és CSS kurzorszabály segítségével az egérkurzor megváltoztatásához
    Padding, Margin and Border – beállítva css belsőés margók, valamint szegélyek minden oldalra (felső, alsó, bal, jobb)
    Megjelenítés (blokk, nincs, soron belüli) CSS-ben – a HTML-elemek megjelenítési típusának beállítása a weboldalon
    Prioritások a Css-ben és azok növekedése a Fontos, a kiválasztók, felhasználói és szerzői stílusok kombinációja és csoportosítása miatt
    CSS - mi ez, hogyan kapcsolódnak a lépcsőzetes stíluslapok html kódot Stílussal és Linkkel
    Címke-, osztály-, azonosító- és univerzális szelektorok, valamint attribútum-választók a modern CSS-ben

rövid tájékoztatás

CSS verziók

Értékek

url Az elérési út a grafikus fájl, amely az url() konstrukcióban van megadva. Ebben az esetben a fájl elérési útja idézőjelben (dupla vagy egyszeres) és anélkül is írható. none Törli az elem háttérképét. inherit A szülő értékét örökli.

HTML5 CSS2.1 IE Cr Op Sa Fx

háttérkép

Objektummodell

document.getElementById("elementID ").style.backgroundImage

Böngészők

Az Internet Explorer 7.0-s verzióig (beleértve a verziót) hátteret alkalmaz a hasLayout tulajdonsággal rendelkező elemek szegélyének belső oldalára. Ha az elemhez nem tartozik hasLayout , akkor a background-image tulajdonság tiszteletben tartja az elem határait, a specifikációban meghatározottak szerint. A renderelés különbsége akkor lesz észrevehető, ha a szegélyek szaggatottak (szaggatottak vagy pontozottak), nem pedig tömörek.

Ha az elem görgetésre vagy automatikusra van állítva, az Internet Explorer 8 egy képpont függőleges késleltetéssel rendelkezik, amikor a háttér görget.

Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.

Ha a háttér egy táblázatsorhoz van beállítva (tag ), akkor a Chrome, Safari, iOS a specifikációtól eltérően jeleníti meg, mégpedig minden cellára külön-külön. Míg a böngészőnek szilárd hátteret kell mutatnia a teljes sorban. A 2. példa a hibát bemutató kódot mutatja be.

HTML5 CSS2.1 IE Cr Op Sa Fx

TR háttér

123

Eredmény ezt a példát V Chrome böngészőábrán látható. 1. internet böngésző Az Explorer, Opera és Firefox megfelelően megjeleníti a sor hátterét (2. ábra).

Rizs. 1. Ismételje meg a hátteret minden cellához

Rizs. 2. Háttér az egész sorhoz

A szerzőtől:Üdvözlök mindenkit. A webdizájnban a háttérszínek és képek óriási szerepet játszanak, mivel ezek segítségével tetszőlegesen tetszőleges elemet lehet vonzóbban megtervezni. Hogyan készítsünk hátteret html-ben, ma megnézzük.

Meg lehet boldogulni a html-vel a háttér beállításakor?

Azonnal megmondom, hogy nem. A html általában nem weboldalak tervezésére szolgál. Csak nagyon kényelmetlen. Például van egy bgcolor attribútum, amivel beállíthatjuk a háttérszínt, de ez nagyon kényelmetlen.

Ennek megfelelően lépcsőzetes stíluslapokat (css) fogunk használni. A háttér beállítására több lehetőség is van. Ma a legalapvetőbbeket elemezzük.

Hogyan lehet hátteret beállítani css-sel?

Tehát mindenekelőtt el kell döntenie, hogy melyik elemre szeretné beállítani a hátteret. Vagyis meg kell találnunk azt a kiválasztót, amelyre a szabályt írjuk. Például, ha be kell állítania a hátteret a teljes oldal egészéhez, akkor ezt a törzsválasztón, az összes blokk esetében pedig a div választón keresztül teheti meg. Hát stb. A hátteret hozzá lehet és kell csatolni bármilyen más szelektorhoz: stílusosztályokhoz, azonosítókhoz stb.

Miután döntött a választó mellett, meg kell írnia magának az ingatlannak a nevét. A háttérszín (nevezetesen egyszínű, nem színátmenet és nem kép) beállításához a háttérszín tulajdonságot használjuk. Utána kettőspontot kell tennie, és meg kell írnia magát a színt. Ezt különböző módon lehet megtenni. Például kulcsszavak, hexadecimális kód, rgb, rgba, hsl formátumok használatával. Bármely módszer megteszi.

A leggyakrabban használt módszer a hexadecimális kód. A színek kiválasztásához olyan programot használhatunk, amelyben láthatjuk a színkódot. Például photoshop, paint vagy valamilyen online eszköz. Ennek megfelelően például előírok egy közös hátteret az egész weblapra.

body( háttérszín: #D4E6B3; )

Ezt a kódot a fejrészbe kell beilleszteni. Fontos, hogy a fájlok ugyanabban a mappában legyenek.

Kép háttérként

Képként fogom használni kis ikonra html nyelv:

Hozzunk létre egy üres blokkot egy azonosítóval:

< div id = "bg" > < / div >

Adjunk neki explicit méreteket és hátteret:

#bg(szélesség: 400px; magasság: 250px; háttérkép: url(html.png); )

#bg(

szélesség: 400 képpont

magasság: 250 képpont

background-image : url (html . png ) ;

Ebből a kódból láthatja, hogy egy új, background-image nevű tulajdonságot használtam. Csak egy kép beszúrására szolgál háttérként egy html elemhez. Nézzük meg mi történt:

Kép megadásához kettőspont után kell írni kulcsszó url, majd zárójelben adja meg a fájl elérési útját. Ebben az esetben az elérési út az alapján kerül megadásra, hogy a kép ugyanabban a mappában van, mint a html dokumentum. Meg kell adni a képformátumot is.

Ha ezt megtette, és a háttér továbbra sem jelenik meg a blokkban, ellenőrizze újra, hogy helyesen írta-e be a kép nevét, helyesen van-e beállítva az elérési út és a kiterjesztés. Ezek a leggyakoribb okok, amelyek miatt egyszerűen nem jelenik meg a háttér, mert a böngésző nem találja a képet.

De észrevett egy tulajdonságot? A böngésző elkészítette és megsokszorozta a képet az egész blokkban. Tehát, csak hogy tudd, ez a háttérképek alapértelmezett viselkedése – függőlegesen és vízszintesen ismétlődnek, ameddig elférnek a blokkban. Ezzel a viselkedéssel könnyen kezelhető. Ehhez használja a background-repeat tulajdonságot, amelynek 4 fő értéke van:

Ismétlés - az alapértelmezett érték, a kép mindkét oldalán ismétlődik;

Repeat-x - ismétlés csak az x tengelyen;

Repeat-y - csak az y tengely mentén ismétlődik;

No-repeat – egyáltalán nem ismétlődik;

Minden értéket felírhat, és megnézheti, mi történik. így fogom írni:

háttér-ismétlés: ismétlés-x;

háttér - ismétlés : ismétlés - x ;

Most ismételje meg csak vízszintesen. Ha nem ismétlést írsz, akkor csak egy kép lesz.

Remek, ezzel be is fejezhetjük, hiszen ezek a háttérrel való munka alapvető jellemzői, de mutatok még 2 tulajdonságot, amivel több vezérlési lehetőséghez juthatsz.

Az ismétléssel a kódolók azt a célt érték el, hogy háttértextúrákat és színátmeneteket hozzanak létre egyetlen apró kép felhasználásával. Lehet 30 x 10 pixel vagy még kisebb is. Vagy talán egy kicsit többet. A kép olyan volt, hogy amikor az egyik vagy akár mindkét oldalon megismételték, nem látszottak átmenetek, így végül egyetlen tömör hátteret kaptunk. Ezt a megközelítést egyébként most érdemes alkalmazni, ha egy zökkenőmentes textúrát szeretne használni a webhelyén háttérként. A gradienst ma már css3 metódusokkal is meg lehet valósítani, erről a későbbiekben mindenképpen szó lesz.

Háttér pozíció

Alapértelmezés szerint a háttérkép, ha nincs beállítva ismétlésre, a blokk bal felső sarkában lesz. De a pozíció könnyen megváltoztatható a háttér-pozíció tulajdonsággal.

Különféleképpen kérdezheted. Az egyik lehetőség az, hogy egyszerűen megadja azokat az oldalakat, amelyeken a képnek szerepelnie kell:

háttér-pozíció: jobb felső;

háttér - pozíció : jobb felső ;

Vagyis függőlegesen minden maradt a régiben: a háttérkép felül van, de vízszintesen az oldalt jobbra, vagyis a jobbra változtattuk. A pozíció beállításának másik módja a százalékos arány. Ebben az esetben a visszaszámlálás minden esetben a bal felső sarokból indul. 100% - az egész blokk. Így a kép pontos középpontba helyezéséhez a következőképpen írjuk:

háttér-pozíció: 50% 50%;

háttér-pozíció: 50% 50%;

A pozicionálással kapcsolatban fontos megjegyezni, hogy az első paraméter mindig a vízszintes, a második paraméter pedig a függőleges helyzet. Tehát ha 80% 20% értéket lát, akkor azonnal levonhatja azt a következtetést, hogy a háttérkép erősen jobbra tolódik, de nem nagyon fog csökkenni.

És végül megadhatja a pozíciót pixelben. Minden a régi, csak a % helyett px lesz. Egyes esetekben ilyen elhelyezésre is szükség lehet.

Rövidített jelölés

Egyetért azzal, hogy a kód meglehetősen nehézkesnek bizonyul, ha minden úgy van beállítva, ahogy mi tettük. Kiderül, hogy be kell állítani a képhez vezető utat, az ismétlést és a pozíciót. Az ismétlés és a pozicionálás persze nem mindig szükséges, de mindenesetre helyesebb lenne a tulajdonsággyorsítás használata. Így néz ki:

háttér: #333 url(bg.jpg) no-repeat 50% 50%;

háttér : #333 url(bg.jpg) ismétlés nélküli 50% 50%;

Vagyis az első lépés az általános szilárd háttérszín rögzítése, ha szükséges. Ezután a képhez vezető út, ismétlés és pozíció. Ha valamelyik paraméterre nincs szükség, egyszerűen hagyja ki. Egyetértek, ez sokkal gyorsabb és kényelmesebb, és jelentősen csökkentjük a kódunkat is. Általában azt tanácsolom, hogy mindig rövidítve írjon, még akkor is, ha csak színt vagy képet kell megadnia.

A háttérkép méretének szabályozása

A mostani képünk nem nagyon illik a következő trükkhöz, úgyhogy egy másikat választok. Méretében legyen tömbszerű vagy nagyobb annál. Tehát képzelje el, hogy azzal a feladattal kell szembenéznie, hogy készítsen egy háttérképet úgy, hogy az ne töltse ki teljesen a blokkját. És a kép például még a blokk méreténél is nagyobb.

Mit lehet ilyen esetben tenni? Természetesen a legegyszerűbb és legésszerűbb lehetőség a kép egyszerű csökkentése, de ez nem mindig lehetséges. Tegyük fel, hogy a szerveren van és bent van Ebben a pillanatban nincs idő és lehetőség csökkenteni. A probléma megoldható a háttérméret tulajdonság segítségével, amely viszonylag újnak nevezhető, és amely lehetővé teszi a méret manipulálását háttérkép, és valójában bármilyen háttérrel.

Tehát a képem most az összes helyet elfoglalja a blokkban, de megadom a háttér méretét:

háttér-méret: 80% 50%;

háttér-méret: 80% 50%;

Az első paraméter ismét a vízszintes méret, a második a függőleges méret. Látjuk, hogy mindent helyesen alkalmaztak - a fotó a blokk szélességének 80%-a szélességben és fele magasságban lett. Itt csak egy pontosítást kell tennie - a méret százalékos beállításával befolyásolhatja a kép arányait. Tehát legyen óvatos, ha nem akarja megtörni az arányokat.

Ahogy sejthető, a háttér mérete pixelben is megadható. Két értékes kulcsszó is használható:

Borító – a kép úgy lesz méretezve, hogy legalább az egyik oldala teljesen kitöltse a blokkot.

Tartalmaz – úgy méretez, hogy a kép maximális méretben teljesen beleférjen a blokkba.

Ezeknek az értékeknek az az előnye, hogy nem változtatják meg a kép arányait, így ugyanazok maradnak.

Azt is meg kell értenie, hogy a kép nyújtása a minőség romlásához vezethet. Példát tudok hozni a layout tervezők életéből és valós gyakorlatából. Mindenki tudja és érti, hogy az asztali számítógépekre való tervezéskor a fő monitorszélességekhez kell igazítani az oldalt: 1280, 1366, 1920. Ha például 1280 x 200 méretű háttérképet készítünk, és nem állítunk be háttér méretet. akkor üres helynél nagyobb szélességű képernyők jelennek meg, a kép nem tölti ki teljesen a szélességet.

Az esetek 99%-ában ez nem felel meg a webfejlesztőnek, ezért úgy állítja be a background-size: cover-et, hogy a kép mindig az ablak maximális szélességéig nyúljon. Ez egy jó trükk, de most bele fog ütközni abba a problémába, hogy az 1920 pixeles képernyő szélességű felhasználók az optimális képminőséget nem látják.

Emlékeztetlek, hogy a maximális szélességre fog nyújtani. Ennek megfelelően a minőség automatikusan romlik. Az egyetlen helyes megoldás itt az lenne, ha kezdetben nagyobb – 1920 pixel széles – képet használnánk. Ekkor a legszélesebb képernyőkön természetes méretben lesz, másokon pedig egyszerűen csak lassan, de ugyanakkor a háttérkép hozzáértő kiválasztásával levágják. kinézet webhely nem lesz hatással.

Összességében ez csak 1 példa arra, hogyan alkalmazhatja a cikkben megszerzett ismereteit a valós elrendezésekben.

áttetsző háttér css-vel

Egy másik funkció, amellyel megvalósítható css- áttetsző háttér. Vagyis ezen a háttéren keresztül lehet majd látni, mi van mögötte.

Példaként a teljes oldal hátterét a példákban korábban használt képre állítom be. A bg azonosítójú blokknál, amelyen minden kísérletünket elvégezzük, a hátteret az rgba színbeállítási formátum használatával állítjuk be.

Ahogy korábban mondtam, a css-ben számos formátum létezik a színek beállítására. Az egyik az rgb, amely a dolgozók számára meglehetősen jól ismert formátum grafikus szerkesztők. Így van írva: rgb(17, 255, 34);

A zárójelben szereplő első érték a piros, majd a zöld, majd a kék telítettsége. Az érték numerikus lehet 0 és 255 között. Ennek megfelelően az rgba formátum sem különbözik, csak egy további paraméter kerül hozzáadásra - az alfa csatorna. Az érték 0 és 1 között lehet, ahol a 0 a teljes átlátszóságot jelenti.

Ha hibát észlel, jelöljön ki egy szövegrészt, és nyomja meg a Ctrl + Enter billentyűket
OSSZA MEG: