CSS háttér gyorsírás

Tartalomjegyzék

CSS-háttér - Gyorsírás tulajdonság

A kód lerövidítéséhez lehetőség van az összes háttértulajdonság egyben megadására is egyetlen ingatlan. Ezt gyorsírási tulajdonságnak nevezik.

Írás helyett:

body {
  background-color: #ffffff;
  background-image: 
  url("img_tree.png");
  background-repeat: no-repeat;
  
  background-position: right top;
}

Használhatja a háttér gyorsírási tulajdonságot:

Példa

A shorthand tulajdonság segítségével állítsa be a háttér tulajdonságait egyben nyilatkozat:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>The background Property</h1>

<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>

<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>

<p>We have also added a right margin, so that the text will not write over the background image.</p>

</body>
</html>

A gyorsírás tulajdonság használatakor a tulajdonságértékek sorrendje a következő:

háttérszín
háttér-kép
background-repeat
háttérmelléklet
háttérpozíció

Nem számít, ha valamelyik ingatlanérték hiányzik, mindaddig, amíg a a többiek ebben a sorrendben vannak. Vegye figyelembe, hogy a fenti példákban nem használjuk a background-attachment tulajdonságot, mivel nincs értéke.

Minden CSS háttértulajdonság

background: Az összes háttértulajdonságot egyetlen deklarációban állítja be
background-attachment: Beállítja, hogy a háttérkép rögzítve legyen, vagy az oldal többi részével együtt görgessen
background-clip: Meghatározza a háttér festési területét
background-color: Beállítja egy elem háttérszínét
background-image: Beállítja egy elem háttérképét
background-origin: Meghatározza a háttérkép(ek) elhelyezését
background-position: Beállítja a háttérkép kiinduló helyzetét
background-repeat: Beállítja, hogyan ismétlődjön a háttérkép
background-size: Meghatározza a háttérkép(ek) méretét