CSS-háttér kontra háttérszín

címkével, majd hozzáadunk egy címsort és bekezdést.

HTML

< div >

< h1 > LinuxHint < / h1 >

< p > Üdvözöljük weboldalunkon < / p >

< / div >

A CSS-ben a div magasságát a következőképpen állítjuk be: 100% ', hogy az a teljes oldalon és a szöveg betűméretében így jelenjen meg: ' xx-nagy ”. Ezután állítsa be a háttérszínt a következőre: aqua ”.

CSS

div {

magasság : 100% ;

betűméret : xx-nagy ;

háttérszín : aqua ;

}

Az alábbi képen láthatja, hogy a háttérszínt alkalmazták:

CSS-háttérkép tulajdonság

Az ' háttérkép ” tulajdonság egy vagy több kép beállítására szolgál a HTML-elemek háttereként. Ezt a tulajdonságot használhatja különböző háttérképek hozzáadásához a különböző elemekhez.

Szintaxis

A background-image tulajdonság szintaxisa a következő:

háttérkép: url()

Itt adja meg a háttérként beállítani kívánt kép elérési útját argumentumként a „ url() ”.

Példa

Az előző példa folytatásaként adjon hozzá egy háttérképet a „ div ' osztály. A kép URL-jét a következőképpen adjuk hozzá url (img.jpg) ”:

div {

...

háttérkép : url ( img.jpg ) ;

}

Az alábbi kimenet azt jelzi, hogy a háttérképet sikeresen hozzáadta:

Vegye figyelembe, hogy a kép ismétlődik. A probléma megoldásához tekintse meg a következő ingatlant.

CSS háttér-ismétlési tulajdonság

Ha egy képet háttérként ad hozzá egy weboldalhoz, az alapértelmezés szerint megismétlődik. Az ismétlődés elkerülése és a minta választása szerinti beállításához a „ háttér-ismétlés ” ingatlan hasznosítva van.

Szintaxis

A background-repeat tulajdonság szintaxisa a következő:

háttér-ismétlés : ismétlés | ismétlés-x | ismétlés-y | nem-ismétlés

A háttér-ismétlés tulajdonság megadott értékeinek leírása az alábbiakban található:

• ismétlés: A kép megismétlésére szolgál mindkét irányban, függőlegesen és vízszintesen.
• ismétlés-x: A kép ismétlődésének csak vízszintes beállítására szolgál.
• ismétlés-y: Meghatározza a kép függőleges ismétlődését.
• nem ismétlődő: A kép ismétlődésének elkerülésére szolgál.

Példa

Itt a background-repeat tulajdonság értékét a következőképpen állítjuk be: nem-ismétlés ”:

div {

...

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

}

A fent megadott kód eredménye az alábbiakban látható. Látható, hogy a kép már nem ismétlődik:

CSS háttérpozíció tulajdonság

A háttérkép helyzetének beállításához a „ háttér-pozíció ” ingatlan használatban van. Lehetővé teszi a kép különböző pozícióinak beállítását, például bal felső, bal középső, bal alsó, jobb felső, jobb középső és sok más pozícióban.

Szintaxis

A background-position tulajdonság szintaxisa a következő:

háttér-pozíció : érték

A helyén ' érték ”, megadhatja a kép helyzetét.

Példa

Itt a háttérpozíciót a következőképpen állítjuk be: központ ”:

div {

...

háttér-pozíció : központ ;

}

Az alábbi kimenetben a kép az oldal közepén jelenik meg:

CSS háttér méretű tulajdonság

A háttérkép méretének beállításához a „ háttér méretű ” ingatlan használatban van.

Szintaxis

A háttérméret szintaxisa a következő:

háttér méretű : hossz|borító

A háttérméret tulajdonság értékeinek leírása a következő:

• hossz: A háttérkép szélességének és magasságának rögzítésére szolgál.
• borító: A háttérkép beállítására szolgál a teljes háttérben.

Példa

A háttér méretét a következőképpen állítjuk be: 100% ' magasság és ' 80% ” szélesség:

div {

...

háttér méretű : 100% 80% ;

}

Láthatja, hogy a kép a megadott méretek alapján át lett méretezve:

CSS háttér-eredetű tulajdonság

Az ' háttér-eredetű ” tulajdonságot használják a háttérkép helyzetének beállítására. A kép alapértelmezés szerint a bal felső sarokban van beállítva.

Szintaxis

A background-origin tulajdonság szintaxisa a következő:

háttér-eredetű : padding-box| border-box | tartalom-doboz

A háttér-eredet tulajdonság értékeit az alábbiakban ismertetjük:

• párnázó doboz: Ez a background-origin tulajdonság alapértelmezett értéke, amelyet a háttérkép helyzetének beállításához használnak a kitöltés élének megfelelően.
• border-box: A kép szegélydobozának megfelelő beállítására szolgál.
• tartalom doboz: A háttérkép beállítására szolgál a kép tartalmának megfelelően.

Jegyzet: A background-origin tulajdonság nem működik, ha a background-attachment tulajdonság értéke '' rögzített ”.

Példa

Először hozzon létre egy szegélyt a tároló körül. Itt folytatjuk az előző példát, és a kitöltési értéket a következőképpen állítjuk be: 10 képpont ”. Ezután állítsa be a szegély szélességét a „ 15 képpont ', stílus: ' gerinc ”, színe pedig „ rgb(1; 68; 68) ”. A végén a háttér-eredetű tulajdonság értékét a következőképpen rendeljük hozzá tartalom-doboz ”:

div {

...

párnázás : 10 képpont ;

határ : 15 képpont gerinc rgb ( 1 , 68 , 68 ) ;

háttér-eredetű : tartalom-doboz ;

}

A fent megadott kód eredménye az alábbiakban látható. Láthatja, hogy a kép pozíciója a div tartalma szerint van beállítva:

CSS háttér-klip tulajdonság

Az ' háttér-klip ” tulajdonság az elem háttérszínén működik. Lehetővé teszi annak szabályozását, hogy a háttérszín mennyivel nyúljon túl egy elemen, például az elem kitöltésén, szegélyén és tartalmán.

Szintaxis

A background-clip tulajdonság szintaxisa a következő:

háttér-eredetű : border-box | padding-box | tartalom-doboz

A háttér-eredet tulajdonság értékeit az alábbiakban ismertetjük:

• border-box: Ez a background-origin tulajdonság alapértelmezett értéke, amely a szegély mögötti háttérszín beállítására szolgál.
• párnázó doboz: A szín beállítására szolgál az elem párnázatán belül.
• tartalom doboz: A háttérszín beállítására szolgál az elem tartalmának megfelelően.

Példa

Folytatjuk az előző példát, és a szegélystílus értékét a következőre változtatjuk. pontozott ” a background-clip tulajdonság megértéséhez. Ezt követően a background-clip tulajdonság értékét a következőképpen állítjuk be: padding-box ”:

div {

...

háttér-klip : padding-box ;

}

A kimenet azt jelenti, hogy a fehér háttérszín megjelenik, amikor a szegély széle véget ért:

CSS háttérmelléklet tulajdonság

Az ' háttér-melléklet ” tulajdonság a viselkedés vagy a kép beállítására szolgál az oldal görgetése közben. Viselkedése beállítható görgetésre más elemekkel vagy fix.

Szintaxis

A background-attachment tulajdonság szintaxisa a következő:

háttér-melléklet : érték

A háttér-csatolás értékét a következőképpen állíthatja be: rögzített ' a háttérkép javításához vagy ' tekercs ” lehetőséget, hogy a kép gördüljön az oldallal.

Jegyzet: Alapértelmezés szerint a background-attachment tulajdonság értéke ' tekercs ”.

Látható, hogy görgetés közben a hozzáadott háttérkép nem statikus. Most javítsuk ki ezt a problémát.

Ehhez a background-attachment tulajdonság értékét a következőképpen állítjuk be: rögzített ”:

div {

...

háttér-melléklet : rögzített ;

}

Íme az eredmény, amely azt mutatja, hogy a kép javítása megtörtént:

Most forduljon a háttér és a háttérszín tulajdonságainak összehasonlításához.

CSS-háttér kontra háttérszín

Az adott táblázat megkülönbözteti a háttér és a háttérszín tulajdonságait jellemzőik alapján:

Jellemzők	CSS háttér	CSS háttérszín
típus	Ez egy szuper ingatlan.	Ez a háttértulajdon résztulajdona.
Funkcionalitás	Beállítja az összes háttértulajdonságot.	Csak a háttérszínt állítja be.
Hatótávolság	Támogatja az összes háttértulajdonságot	Csak a háttérszín tulajdonságot támogatja
Szint	Ha több háttérértéket kell hozzáadnia, könnyen használható. Egyszerre beállíthatja az összes háttértulajdonság értékét.	Akkor használható, ha csak egyetlen háttérszínt kell hozzáadnia.
Szintaxis	háttér: értékek (Az értékek bg-color, bg-image és egyéb tulajdonságok)	háttérszín: szín

Elmagyarázták, hogy miben különböznek a háttérszín tulajdonságai a háttértulajdonságoktól.

Következtetés

CSS ' háttér ” tulajdonság egy rövidített tulajdonság, amellyel egyszerre több háttérértéket állíthatunk be, például színt, képet, pozíciót, méretet, eredetet stb. Másrészről, ' háttérszín ” csak a háttér színének növelésére szolgál. Ebben az útmutatóban a CSS-háttértulajdonság és a CSS-háttérszín tulajdonság közötti különbséget tárgyaltuk.