Obrazy tła mają duży wpływ na wygląd każdej witryny. Kiedy przewijamy stronę internetową/treść, to jakie będzie zachowanie obrazu tła? Czy będzie to również poruszać z treścią, czy nie.

Dobrze! Domyślnie obraz tła przewija się z treścią. Właściwość przywiązania tła jest specjalnie używana do określenia odpowiedzi obrazu tła. Decyduje o zachowaniu obrazu tła za pomocą następujących wartości:

• naprawił: Przypisanie ustalonej wartości do obrazu tła naprawi obraz na stronie internetowej.
• zwój: Wartość przewijania pozwala obrazowi przewijać z zawartością.
• lokalny: Wartość lokalna pozwala obrazowi przewijać z zawartością elementu.

Ten zapis zapewni szczegółowe zrozumienie właściwości przywiązania tła w CSS. Aby lepiej zrozumieć, ten artykuł rozważa niektóre przykłady o różnych wartościach przywiązania w tle.

Składnia

Poniższy fragment opisuje składnię właściwości przywiązania tła

Przywiązanie tła: wartość

Omówmy, jakie wartości mogą przyjąć właściwość w tle.

stała wartość

"naprawił" Wartość ustawia obraz na określoną pozycję. Obraz nie poruszałby się z treścią.

Przykład

Kod pod względem podanym poniżej wyjaśni, jak ustawić naprawił Wartość dla właściwości przywiązania tła

Html

Image tła: Naprawiono

wszystkie treści napisane tutaj!

CSS

ciało
Image tła: URL („Okładka.jpg ");
Powtórzenie tła: bez powtórzenia;
Pozycja tła: lewy góra;
Przywiązanie do tła: Naprawiono;

Powyższy kod generuje następujące dane wyjściowe:

Wyjście wyjaśnia, że ​​obraz pozostaje naprawiony.

Wartość przewijania

"zwój" wartość pozwala nam przewijać obraz z zawartością. Aby lepiej zrozumieć, rozważ poniższy kod:

Html

Image tła: przewiń

wszystkie treści napisane tutaj!

CSS

ciało
Image tła: URL („Okładka.jpg ");
Powtórzenie tła: bez powtórzenia;
Pozycja tła: lewy góra;
Przywiązanie do tła: przewiń;

Powyższy kod wytworzy następujące dane wyjściowe:

wartość lokalna

Wartość lokalna przesuwa obraz z zawartością elementu. Jeśli jednak zaimplementujesz lokalne w powyższym przykładzie, wynik będzie wyglądał tak samo jak wartość przewijania. Tak więc, w jaki sposób możemy różnicować wartości lokalne i przewijania?

Różnica między wartościami lokalnymi i przewijania można zauważyć w scenariuszu, w którym na stronie internetowej znajduje się wiele przewijanych obszarów.

Przykład

Ten przykład dostarczy kod wartości lokalnej dla wielu szerokich obszarów.

Html

Image tła: lokalny

Cała treść przychodzi tutaj

CSS

.skrzynka

szerokość: 500px;
Wysokość: 500px;
Margines: 100px;
Border: 10px Solid Black;
przepełnienie: auto;
Image tła: URL („Okładka.jpg ");
Powtórzenie tła: bez powtórzenia;
Przywiązanie do tła: lokalny;

Dane wyjściowe powyższego kodu będzie takie:

W powyższym wyjściu znajdują się dwa paski przewijania. Kiedy przenosimy dowolny pasek zwoju i.mi. wewnętrzny lub zewnętrzny obraz porusza się z treścią.

W powyższym kodzie użyj przewijania zamiast lokalnego i obserwuj różnicę.

Scroll CSS

Przywiązanie do tła: przewiń;

Pojawi się następujące dane wyjściowe dla wartości przewijania:

Istnieją dwa paski przewijania. Kiedy przewijamy zewnętrzny pasek, obraz porusza się z zawartością. A kiedy przewijamy wewnętrzny obraz paska.

Wniosek

Właściwość przywiązania tła określa, jak zachowuje się obraz tła. Wymaga trzech wartości, tj. Naprawiono, przewijanie, lokalne. "naprawił" Aby naprawić obraz w określonej pozycji, "zwój" Aby przenieść obraz z treścią i "lokalny" Aby przenieść obraz z treścią elementu.

Ten zapis przedstawił szczegółowy przegląd właściwości przywiązania w tle. Ponadto ten zapis pokazał, jak używać ustalonej, przewijania i wartości lokalnej dla właściwości załącznika.