Pozadie CSS vs farba pozadia

a potom pridáme nadpis a odsek.

HTML

< div >

< h1 > LinuxHint < / h1 >

< p > Vitajte na našej stránke < / p >

< / div >

V CSS upravíme výšku div ako „ 100% “, aby sa zobrazil na celej strane a veľkosti písma textu ako „ xx-veľký “. Potom nastavte farbu pozadia ako „ aqua “.

CSS

div {

výška : 100% ;

veľkosť písma : xx-veľký ;

farba pozadia : aqua ;

}

Na nižšie uvedenom obrázku môžete vidieť, že je použitá farba pozadia:

Vlastnosť obrázka pozadia CSS

' obrázok na pozadí ” vlastnosť sa používa na nastavenie jedného alebo viacerých obrázkov ako pozadia prvkov HTML. Túto vlastnosť môžete využiť na pridanie rôznych obrázkov pozadia pre rôzne prvky.

Syntax

Syntax vlastnosti background-image je:

obrázok na pozadí: url()

Tu zadajte cestu k obrázku, ktorý chcete nastaviť ako pozadie ako argument pre „ url() “.

Príklad

V pokračovaní predchádzajúceho príkladu pridajte obrázok na pozadí do „ div ' trieda. Pridáme adresu URL obrázka ako „ url(img.jpg) “:

div {

...

obrázok na pozadí : url ( img.jpg ) ;

}

Nižšie uvedený výstup znamená, že obrázok na pozadí bol úspešne pridaný:

Všimnite si, že obrázok sa opakuje. Ak chcete tento problém vyriešiť, pozrite si ďalšiu vlastnosť.

Vlastnosť CSS s opakovaním na pozadí

Keď pridáte obrázok ako pozadie na webovú stránku, predvolene sa to opakuje. Ak sa chcete vyhnúť tomuto opakovaniu a nastaviť vzor podľa vlastného výberu, „ pozadie-opakovať “ nehnuteľnosť je využívaná.

Syntax

Syntax vlastnosti background-repeat je:

pozadie-opakovať : opakovať | repeat-x | opakovať-y | bez opakovania

Popis uvedených hodnôt vlastnosti background-repeat je uvedený nižšie:

• opakovať: Používa sa na opakovanie obrazu v oboch smeroch, vertikálne aj horizontálne.
• repeat-x: Slúži na nastavenie opakovania obrazu iba horizontálne.
• repeat-y: Určuje vertikálne opakovanie obrazu.
• neopakovať sa: Používa sa, aby sa zabránilo opakovaniu obrazu.

Príklad

Tu nastavíme hodnotu vlastnosti background-repeat ako „ bez opakovania “:

div {

...

pozadie-opakovať : bez opakovania ;

}

Výsledok vyššie uvedeného kódu je uvedený nižšie. Môžete vidieť, že obrázok sa už neopakuje:

Vlastnosť postavenia na pozadí CSS

Ak chcete nastaviť polohu obrázka na pozadí, „ pozícia na pozadí “ sa používa nehnuteľnosť. Umožňuje vám upraviť obraz v rôznych polohách, napríklad vľavo hore, vľavo v strede, vľavo dole, vpravo hore, vpravo v strede a mnoho ďalších.

Syntax

Syntax vlastnosti background-position je:

pozícia na pozadí : hodnotu

Na mieste „ hodnotu “, môžete určiť polohu obrázka.

Príklad

Tu nastavíme pozíciu pozadia ako „ centrum “:

div {

...

pozícia na pozadí : centrum ;

}

Vo výstupe nižšie sa obrázok zobrazí v strede stránky:

Vlastníctvo s veľkosťou pozadia CSS

Ak chcete nastaviť veľkosť obrázka na pozadí, „ veľkosť pozadia “ sa používa nehnuteľnosť.

Syntax

Veľkosť pozadia má nasledujúcu syntax:

veľkosť pozadia : dĺžka|obal

Nasleduje popis hodnôt vlastnosti background-size:

• dĺžka: Používa sa na opravu šírky a výšky obrázka na pozadí.
• kryt: Používa sa na úpravu obrázka pozadia v celom pozadí.

Príklad

Veľkosť pozadia nastavíme ako „ 100% 'výška a' 80 % ”šírka:

div {

...

veľkosť pozadia : 100% 80 % ;

}

Môžete vidieť, že veľkosť obrázka bola zmenená na základe zadaných rozmerov:

Vlastnosť pôvodu na pozadí CSS

' pôvod v pozadí Vlastnosť ” sa používa na úpravu oblasti umiestnenia obrázka na pozadí. Obrázok je štandardne upravený v ľavom hornom rohu.

Syntax

Syntax vlastnosti background-origin je:

pôvod v pozadí : vypchávka-box| border-box | content-box

Hodnoty vlastnosti background-origin sú popísané nižšie:

• výplňový box: Je to predvolená hodnota vlastnosti background-origin, ktorá sa používa na úpravu polohy obrázka na pozadí podľa okraja výplne.
• ohraničenie: Používa sa na nastavenie obrázka podľa okraja obrázka.
• obsah box: Používa sa na nastavenie obrázka na pozadí v súlade s obsahom obrázka.

Poznámka: Vlastnosť background-origin nefunguje, ak je hodnota vlastnosti background-attachment nastavená ako „ pevné “.

Príklad

Najprv vytvorte okraj okolo nádoby. Tu budeme pokračovať v predchádzajúcom príklade a nastavíme hodnotu výplne ako „ 10 pixelov “. Potom upravte šírku okraja ako „ 15 pixelov “, štýl ako „ hrebeň “ a farbu ako „ rgb(1, 68, 68) “. Nakoniec priradíme hodnotu vlastnosti background-origin ako „ content-box “:

div {

...

vypchávka : 10 pixelov ;

hranica : 15 pixelov hrebeň rgb ( 1 , 68 , 68 ) ;

pôvod v pozadí : content-box ;

}

Výsledok vyššie uvedeného kódu je uvedený nižšie. Môžete vidieť, že poloha obrázka je nastavená podľa obsahu div:

Vlastnosť klipu na pozadí CSS

' klip na pozadí ” vlastnosť funguje na farbe pozadia prvku. Umožňuje vám ovládať, ako ďaleko sa farba pozadia rozprestiera za prvkom, ako je napríklad výplň prvku, jeho orámovanie a jeho obsah.

Syntax

Syntax vlastnosti background-clip je:

pôvod v pozadí : border-box | vypchávka | content-box

Hodnoty vlastnosti background-origin sú popísané nižšie:

• ohraničenie: Je to predvolená hodnota vlastnosti background-origin, ktorá sa používa na nastavenie farby pozadia za okrajom.
• výplňový box: Používa sa na úpravu farby v poli výplne prvku.
• obsah box: Slúži na nastavenie farby pozadia podľa obsahu prvku.

Príklad

Budeme pokračovať v predchádzajúcom príklade a zmeníme hodnotu štýlu orámovania na „ bodkovaný “, aby ste pochopili vlastnosť klipu pozadia. Potom nastavíme hodnotu vlastnosti background-clip ako „ vypchávka-box “:

div {

...

klip na pozadí : vypchávka-box ;

}

Výstup znamená, že biela farba pozadia sa zobrazí na konci okraja:

Vlastnosť CSS pozadia

' pozadie-príloha ” sa používa na úpravu správania alebo obrázku pri posúvaní stránky. Jeho správanie je možné nastaviť posúvaním pomocou iných prvkov alebo opraviť.

Syntax

Syntax vlastnosti background-attachment je:

pozadie-príloha : hodnotu

Hodnotu prílohy na pozadí môžete nastaviť ako „ pevné “ na opravu obrázka na pozadí alebo “ rolovať “, aby sa obrázok mohol posúvať spolu so stránkou.

Poznámka: V predvolenom nastavení je hodnota vlastnosti background-attachment nastavená ako „ rolovať “.

Je vidieť, že pridaný obrázok na pozadí nie je statický, keď sme rolovali. Teraz poďme vyriešiť tento problém.

Aby sme tak urobili, nastavili sme hodnotu vlastnosti background-attachment ako „ pevné “:

div {

...

pozadie-príloha : pevné ;

}

Tu je výsledok, ktorý dokazuje, že obrázok bol opravený:

Teraz prejdite k porovnaniu vlastností pozadia a farby pozadia.

Pozadie CSS vs farba pozadia

Daná tabuľka bude rozlišovať vlastnosti pozadia a farby pozadia na základe ich vlastností:

Vlastnosti	Pozadie CSS	Farba pozadia CSS
Typ	Je to super nehnuteľnosť.	Je to čiastková vlastnosť vlastnosti pozadia.
Funkčnosť	Nastavuje všetky vlastnosti pozadia.	Nastaví iba farbu pozadia.
Rozsah	Podporuje všetky vlastnosti pozadia	Podporuje iba vlastnosť farby pozadia
úroveň	Keď potrebujete pridať viacero hodnôt pozadia, je to jednoduché. Môžete nastaviť hodnoty všetkých vlastností pozadia naraz.	Dá sa použiť, keď potrebujete pridať iba jednu farbu pozadia.
Syntax	pozadie: hodnoty (Hodnoty sú bg-color, bg-image a ďalšie vlastnosti)	farba pozadia: farba

Bolo vysvetlené, ako sa vlastnosti farby pozadia líšia od vlastností pozadia.

Záver

CSS “ pozadie vlastnosť je skrátená vlastnosť používaná na nastavenie viacerých hodnôt pozadia naraz, ako je farba, obrázok, poloha, veľkosť, pôvod a ďalšie. Na druhej strane, ' farba pozadia “ sa používa iba na pridanie farby do pozadia. V tejto príručke sme diskutovali o rozdieloch medzi vlastnosťou pozadia CSS a vlastnosťou farby pozadia CSS.