Savybė background-attachment

Savybė background-attachment nustato, kaip slinkti elemento fono paveikslėlį: kartu su tekstu ar tekstas slinks per paveikslėlį.

Sintaksė

cssselektorius {
  background-attachment: fixed | scroll | local;
}

Reikšmės

Reikšmė	Aprašas
`fixed`	Fono paveikslėlis bus nejudrus, o tekstas slinks per jį.
`scroll`	Fono paveikslėlis slinks kartu su tekstu.
`local`	Fonas pritvirtinamas atsižvelgiant į elemento elgesį. Jei elementas turi slinkimą, tai fonas slinks kartu su turiniu, bet fonas, išeinantis už elemento ribų, lieka vietoje.

Numatytoji reikšmė: scroll.

Pavyzdys . Reikšmė scroll

Dabar savybė background-attachment nustatyta į reikšmę scroll. Paslinkite elementą vertikaliai - pamatysite, kaip tekstas slinka kartu su fonu:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Pavyzdys . Reikšmė fixed

O dabar savybė background-attachment nustatyta į reikšmę fixed. Paslinkite elementą vertikaliai - pamatysite, kaip tekstas slinks per foną:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Taip pat žiūrėkite

savybė background,
kuri yra sutrumpinta savybė fonui