Īpašība background-attachment

Īpašība background-attachment nosaka, kā ritināt elementa fona attēlu: kopā ar tekstu vai teksts slīdēs pāri attēlam.

Sintakse

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

Vērtības

Vērtība	Apraksts
`fixed`	Fona attēls būs nekustīgs, un teksts pāri tam slīdēs.
`scroll`	Fona attēls tiks ritināts kopā ar tekstu.
`local`	Fons tiek fiksēts, ņemot vērā elementa uzvedību. Ja elementam ir ritināšana, tad fons tiks ritināts kopā ar saturu, bet fons, kas iziet ārpus elementa robežām, paliek vietā.

Noklusējuma vērtība: scroll.

Piemērs . Vērtība scroll

Šobrīd īpašība background-attachment ir iestatīta uz vērtību scroll. Ritiniet elementu vertikāli - jūs redzēsiet, kā teksts tiek ritināts kopā ar fona attēlu:

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;
}

Результат:

Piemērs . Vērtība fixed

Bet tagad īpašība background-attachment ir iestatīta uz vērtību fixed. Ritiniet elementu vertikāli - jūs redzēsiet, kā teksts slīd pāri fona attēlam:

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;
}

Результат:

Skatiet arī

īpašība background,
kas ir saīsinājuma īpašība fonam