7 CSS-háttértulajdonság a webtervek élénkítéséhez

A webhely háttértémája jelentősen befolyásolhatja annak megjelenését és hangulatát. A színek, képek és háttérminták érzelmeket idéznek elő, és nagyszerű felhasználói élményt teremtenek.

A CSS-háttértulajdonságok segítségével beállíthatja a HTML-elemek háttérstílusát. Tudjon meg mindent néhány olyan CSS-tulajdonságról, amellyel kiváló háttereket hozhat létre.

1. háttérszín

A háttérszín tulajdonság beállítja egy elem hátterének színét. A színt beállíthatja egy név, például "piros", egy HEX érték, például "#00FF00" vagy egy RGB érték (például "rgb (0, 255, 0)") használatával. HSL-értéket is használhat a háttérszín beállításához az árnyalat, a telítettség és a világosság használatával.

A következő példa az egész oldal háttérszínét narancssárgára állítja. A címsorelemek mindegyike más-más hátteret kap.

<test>
<h2>Zöld vagyokh2>
<h3>Vörös vagyokh3>
<h4>Kék vagyokh4>
test>

A CSS használatával minden elemhez egyedi háttérszínt alkalmazhat:

test {
háttérszín: narancs;
}
h2 {
háttérszín: #006600;
}
h3 {
háttérszín: rgb(128, 0, 0);
}
h4{
háttérszín: hsl(240, 100%, 50%);
}

Ezzel az oldal stílusát a következőképpen alakítja ki:

Az opacitás tulajdonság segítségével meghatározhatja egy elem átlátszóságát. Az átlátszatlanság értéke 0,0 és 1,0 között van. Minél alacsonyabb az érték, annál átláthatóbb az elem.

Példaként állítsa be egy törzselem átlátszatlanságát 0,5-re:

test {
háttérszín:narancs;
átlátszatlanság:0.5;
}

Ez a következőképpen jelenik meg – hasonlítsa össze a színeket az előző képernyőképen látható színekkel:

2. háttérkép

A background-image tulajdonság egy képet állít be egy elem háttereként. Hivatkozhat egy helyi vagy az internetről származó képre.

<test>
 <h1>Hellóott!h1>
 <p>énvananképban benaz énháttér!p>
test>

A CSS fájl:

test {
háttérkép:url("https://képeket.pexel.com/fényképeket/1191710/pexels-fotó-1191710.jpeg?auto=borogatás&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Ez így fog megjelenni:

Használhatod is háttér színátmenetek hogy egyedi megjelenést hozzon létre alkalmazásának.

3. háttér-ismétlés

A background-image tulajdonság alapértelmezés szerint megismétli a képeket. Választhat, hogy a képet vízszintesen ismételje meg az x tengelyen, vagy függőlegesen az y tengelyen.

Alternatív megoldásként, ha az ismétlés nem felel meg a stílusodnak, az érték használatával eltávolíthatod nem-ismétlés.

<test>
<h1>Szia!h1>
<h3>Bemutatom az ismétlési háttér-ismétlés tulajdonságot az x tengelyen!h3>
test>

A következő CSS használatával ismétlődő hátteret alkalmazhat az x tengely mentén:

test {
háttérkép: url("https://képeket.pexel.com/fényképeket/459335/pexels-fotó-459335.jpeg?auto=borogatás&cs=tinysrgb&w=1260&h=750&dpr=1");
háttér-ismétlés: ismétlés-x;
}

Az eredmény:

Ezután próbálja meg ismételni a képet az y tengelyen:

test {
háttérkép:url("https://cdn.pixabay.com/fénykép/2016/04/18/22/05/tengeri kagylók-1337565__340.jpg");
háttér-ismétlés:repeat-y;
}

Az eredmény:

Az y tengelyen lévő példa minden bizonnyal torznak tűnik. Ha nem ezeket a mintákat keresi, megadhatja nem-ismétlés helyette:

test {
háttérkép:url("https://képeket.pexel.com/fényképeket/259915/pexels-fotó-259915.jpeg?auto=borogatás&cs=tinysrgb&w=600");
háttér-ismétlés:nem-ismétlés;
}

Az eredmény:

4. háttér-pozíció

A background-position tulajdonság határozza meg a háttérkép pozícióját az elemen belül. Pozícióspecifikus kulcsszavakat használ, mint pl központ, felső, és alsó, vagy pixel vagy százalékérték.

Adjon hozzá egy háttérpozíció tulajdonságot az utolsó képhez:

test {
háttérkép: url("https://képeket.pexel.com/fényképeket/259915/pexels-fotó-259915.jpeg?auto=borogatás&cs=tinysrgb&w=600");
háttér-pozíció: tetejéreközpont;
}

Így fog kinézni:

Látható, hogy a kép torzítja a weboldal megjelenését. Javítsuk ki a következő tulajdonsággal.

5. háttér méretű

A háttérkép tulajdonság segítségével meghatározhatja a kép méretét. Olyan kulcsszavakat használ, mint pl borító és tartalmaz vagy egy pixel vagy százalékérték. Javítsuk ki a torz háttérképet egy háttérméret tulajdonság hozzáadásával.

body {
 háttérkép: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 háttér-ismétlés: nincs ismétlés;
 háttér-pozíció: középen;

Az eredmény azt mutatja, hogy a kép immár arányosan fedi a weboldalt.

6. háttér-melléklet

A background-attachment tulajdonság határozza meg, hogy a háttérkép pozíciója rögzített maradjon, vagy gördüljön. Használhatja a rögzített vagy görgetés kulcsszavakat.

Mutassuk meg ezt a következő kódban:

<test>
<h1>A háttér-csatolás tulajdonságh1>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
<p>A rögzített csatolás tulajdonsággal észreveheti, hogy a háttér nem mozdul a szöveggel együtt.p>
test>

A CSS fájl:

test {
háttérkép: url("https://képeket.pexel.com/fényképeket/96627/pexels-fotó-96627.jpeg?auto=borogatás&cs=tinysrgb&w=600");
háttér-ismétlés: nem-ismétlés;
háttér-pozíció: központ;
háttér méretű: borító;
háttér-melléklet: rögzített;
}

Ha lejjebb lép az oldalon, észreveszi, hogy a háttér nem mozdul:

A scroll background-attachment tulajdonság bemutatásához módosítsa a kulcsszót a következőre tekercs. Észre fogja venni, hogy most a háttér együtt mozog a szöveggel.

test {
háttérkép: url("https://képeket.pexel.com/fényképeket/96627/pexels-fotó-96627.jpeg?auto=borogatás&cs=tinysrgb&w=600");
háttér-ismétlés: nem-ismétlés;
háttér-pozíció: központ;
háttér méretű: borító;
háttér-melléklet: tekercs;
}

7. A háttér gyorsírási tulajdonság

Észreveheti, hogy több tulajdonságot is fel kell vennie a tökéletes háttér eléréséhez. Ez sok kód írásával jár. De lerövidítheti a kódot a background shorthand tulajdonság használatával.

A gyorsírás tulajdonság lehetővé teszi számos háttértulajdonság beállítását egyetlen sorban. Ön használja a kulcsszót háttér a gyorsírás tulajdonság beállításához.

Például a következő kód írása helyett:

test {
háttérszín: zöld;
háttérkép: url("laptop 3.jpg");
háttér-ismétlés: nem-ismétlés;
háttér méretű: borító;
háttér-csatolás: tekercs;
háttér-pozíció: központ;
}

Egy sorba írhatod, így:

test {
háttér: zöldurl("laptop 3.jpg") nem-ismétlésborítótekercsközpont;
}

A gyorsírás tulajdonság egy meghatározott sorrendet követ. A tulajdonságokat akkor is ebben a sorrendben kell igazítania, ha egy vagy több hiányzik. A sorrend a következő:

• háttérszín
• háttérkép
• háttér-ismétlés
• háttér-melléklet
• háttér-pozíció

Érdekes terveket készíthet a CSS segítségével különféle felhasználási módok segítségével háttér minták. Ezekkel a mintákkal egyedi és kiemelkedő háttereket érhet el weboldala számára.

Egyéb háttértulajdonságok a CSS-ben

A CSS erőteljes, és sok mindent megtehet vele, hogy felpörgesse alkalmazását. Animáció hozzáadásához használhat olyan tulajdonságokat, mint a background-clip, background-origin és background-blend-mode.

Az oldalak testreszabásához színátmeneteket és mintákat is használhat. Kísérletezzen a CSS-háttértulajdonságokkal, hogy tökéletesítse webtervezési készségeit.