Obraz tła w CSS
W CSS, zdjęcie w tle Właściwość służy do ustawienia obrazu tła dla pojedynczych lub wielu elementów. W CSS można użyć wielu właściwości do ustawienia obrazu tła. Niektóre powszechnie używane właściwości podano poniżej:
- Rozmiar tła właściwość służy do dostosowania rozmiaru obrazu tła.
- powtarzanie tła właściwość włącza lub wyłącza powtórzenie obrazu.
- Pozycja w tle Określa pozycję obrazu.
Ten zapis przedstawi kompleksowy przegląd właściwości obrazu tła, w którym nauczysz się dodać obraz tła do jednego elementu lub całego ciała.
Jak dodać pojedynczy obraz tła w CSS
Właściwość obrazu tła jest najczęściej używana z elementem ciała. Aby dodać obraz tła.
Przykład 1: Poniższy kawałek kodu osadzi obraz tła na całym ciele:
Zdjęcie w tle
Witamy w Linuxhint.com
Pokaże następujące dane wyjściowe:
W powyższym podanym przykładowym obrazie umieszczono w tym samym folderze z plikiem HTML, więc w URL Bierze tylko nazwę obrazu z jego rozszerzeniem, jak pokazano w następującym fragmencie:
Teraz przenieśmy obraz do innego folderu, powiedzmy "obrazy":
Jeśli obraz nie ma w tym samym katalogu, musimy określić pełną ścieżkę obrazu, w przeciwnym razie nie otrzymalibyśmy pożądanych wyników.
Przykład 2: Zamiast zapewnić całą ścieżkę, ten przykład będzie próbował uzyskać dostęp do obrazu tylko z jego nazwą:
Zdjęcie w tle
Witamy w Linuxhint.com
Obraz jest umieszczony na obrazach. Ze wyjścia byłoby jasne, że jeśli nie określisz dokładnej ścieżki, nie otrzymałbyś pożądanych wyników, jak pokazano poniżej:
Przykład 2: Rozważmy przykład, w którym obraz jest obecny w folderze obrazów, gdy plik HTML znajduje się w folderze obrazu tła. W takim przypadku określamy pełną ścieżkę obrazu, jak pokazano w poniższym fragmencie:
Zdjęcie w tle
Witamy w Linuxhint.com
W adresie URL po raz pierwszy pojawiają się dwie kropki „…” te stany cofają się jeden katalog, a następnie przejdź do "obrazy" katalog, w którym obraz jest umieszczony, a na końcu nazwa obrazu będzie dostępna z jego rozszerzeniem, takim jak JGEG, PNG itp. Teraz ten program wygeneruje właściwe wyjście z obrazem tła, jak pokazano poniżej:
Podobnie obraz tła może być osadzony w dowolnym elemencie
,
, itp.
Jak dodać wiele obrazów tła w CSS
W CSS wiele obrazów tła można dodać do tego samego elementu, zapewniając wiele adresów URL.
Przykład
Poniższy kod dodaje wiele obrazów na elemencie ciała, a ponadto wykorzysta kilka innych właściwości, takich jak powtarzanie tła, wielkości tła itp. jak pokazano niżej:
Zdjęcie w tle
Witamy w Linuxhint.com
Powyższy kod wykorzystuje
- Kolorowa właściwość, aby ustawić złoty kolor dla tekstu,
- obraz tła dodał dwa obrazy,
- Ustaw rozmiar wielkości tła na 600px,
- pozycja w tle, aby wyrównać pozycję obrazu do środka,
- i wreszcie powtórka tła wymaga „bez powtórzenia”, co oznacza, że każdy obraz będzie wyświetlany tylko raz.
W rezultacie wygeneruje następujące dane wyjściowe:
Ze wyjścia wyraźnie widać, że niebieski.Obraz JPG znajduje się za Linuxhint.Obraz JPEG, co oznacza, że adres URL, który piszesz najpierw, pojawi się na górze, podczas gdy drugi obraz zostanie wyświetlony z tyłu/tyłu.
Wniosek
zdjęcie w tle Właściwość ustawia obraz tła dla pojedynczych lub wielu elementów. Aby zaimplementować obraz tła, po prostu określ adres URL obrazu w właściwości obrazu tła.
W tym artykule przedstawiono szczegółowy przegląd właściwości obrazu tła. Początkowo wyjaśnia, jak dodać pojedynczy obraz tła w CSS. Następnie ten napisał, jak ustawić więcej niż jedno obrazy tła dla elementu.