Używanie CSS do ustawienia obrazu tła

• Może 9, 2024

Czy zastanawiałeś się kiedyś, jak strony internetowe zarządzają tymi ładnymi projektami i zdjęciami unoszącymi się za tekstem? Wszystko to odbywa się dzięki magii Cascading Style Sheets. CSS pozwala nie tylko wyznaczyć obraz jako tło strony, ale także dostosować sposób wyświetlania obrazu - aby uzyskać pożądany wygląd.

Podstawowym elementem składowym obrazu tła jest, odpowiednio, właściwość „obrazu tła”. Korzystasz z tej właściwości, aby poinformować witrynę, gdzie znajduje się plik obrazu, w następujący sposób:

ciało {
background-image: url ("image.gif");
}

To wszystko, co musisz zrobić, aby umieścić obraz tła dla swojej strony internetowej. Oczywiście prawdopodobnie będziesz chciał dostosować wygląd obrazu. Załóżmy, że chcesz, aby obraz zaczynał się u góry strony, ale powinien być wyśrodkowany poziomo zamiast wyrównany do lewej (domyślne wyrównanie). W takim przypadku będziesz chciał dodać właściwość „background-position” do swojej reguły CSS:

ciało {
background-image: url ("image.gif");
pozycja tła: środkowa góra;
}

Podczas definiowania właściwości „pozycja-tło” pierwsza wartość ustawia wyrównanie w poziomie (lewy, środkowy lub prawy), a druga ustawia wyrównanie w pionie obrazu (górny, środkowy lub dolny).

Następnie decydujesz, że chcesz zatrzymać kafelkowanie obrazu (powtarzanie się) w poziomie, chociaż chcesz, aby kafelki były w pionie. Czas ujawnić właściwość „powtarzania w tle”:

ciało {
background-image: url ("image.gif");
pozycja tła: środkowa góra;
powtórzenie w tle: powtórz-y;
}

Ustawienie wartości na „repeat-y” nakazuje przeglądarce umieszczenie obrazu tła wzdłuż osi y, czyli w pionie, ale nie w osi x (w poziomie), czego dokładnie chcieliśmy. Jeśli chcesz ułożyć go poziomo, ale nie pionowo, zamiast tego użyłbyś wartości „repeat-x”; jeśli w ogóle nie chcesz, aby obraz był kafelkowy, nadaj mu wartość „nie powtarzaj”. Domyślną wartością jest kafelkowanie obrazu zarówno poziomo, jak i pionowo, więc jeśli jest to najlepszy wybór dla twojego obrazu, nie musisz wcale ustawiać właściwości „powtarzania tła”.

Na koniec możesz spojrzeć na właściwość „background-załącznik”. Domyślnie obraz będzie się przewijał w miarę przewijania strony, więc jeśli nie powtarzasz obrazu w pionie i masz długą stronę, obraz nie będzie rozciągał się na dół strony. Możesz to zmienić, ustawiając właściwość „background-attach” na „fixed”, co powoduje, że obraz tła pozostaje w tym samym miejscu na monitorze, niezależnie od przewijania strony. Teraz Twoje reguły obrazu tła będą wyglądać następująco:

ciało {
background-image: url ("image.gif");
pozycja tła: środkowa góra;
powtórzenie w tle: powtórz-y;
załącznik w tle: naprawiony;
}


Jeśli chcesz zachować jak najmniejsze reguły CSS, możesz połączyć wszystkie wartości tła w jeden wiersz, używając właściwości „background”, jak poniżej:

tło {
url („image.gif”) repeat-y naprawiono środkową górę;
}

Korzystając z właściwości „background”, należy podać wartości w określonej kolejności:
[kolor tła (jeśli jest używany)] [obraz tła] [powtórzenie tła] [załącznik tła] [pozycja tła]. Możesz pominąć każdą niepotrzebną wartość, wystarczy wymienić wszystkie wartości, których używasz w odpowiedniej kolejności, w przeciwnym razie reguła nie będzie działać.

Instrukcje Wideo: Jak zrobić stronę na całe okno przeglądarki? #css #projekty #1 (Może 2024).