თვისება background-attachment

თვისება background-attachment აზღვევს, როგორ უნდა გადაიხვიოს ელემენტის ფონური სურათი: ტექსტთან ერთად თუ ტექსტი სურათზე უნდა სრიალებდეს.

სინტაქსი

cssსელექტორი {
  background-attachment: fixed | scroll | local;
}

მნიშვნელობები

ნაგულისხმევი მნიშვნელობა: scroll.

მაგალითი . მნიშვნელობა scroll

ახლა თვისება background-attachment დაყენებულია მნიშვნელობაზე scroll. ვერტიკალურად გადაახვიეთ ელემენტი - დაინახავთ, როგორ ტექსტი ფონთან ერთად გადაიხვევა:

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

Результат:

მაგალითი . მნიშვნელობა fixed

ახლა კი თვისება background-attachment დაყენებულია მნიშვნელობაზე fixed. ვერტიკალურად გადაახვიეთ ელემენტი - დაინახავთ, როგორ ტექსტი ფონზე სრიალებს:

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

Результат:

ასევე იხილეთ