Zawartość

• Do kroku
• Metoda 1 z 4: ustawienie jednolitego koloru tła
• Metoda 2 z 4: użycie obrazu jako tła
• Metoda 3 z 4: Utwórz tło gradientowe
• Metoda 4 z 4: Ustaw kolorową animację jako tapetę

Aby móc ustawić tło strony internetowej w HTML, wystarczy dokonać niewielkiej zmiany w elemencie „body” w elemencie style> / style> tagi. Kroki zależą od tego, jak chcesz wyglądać tapeta. Dowiedz się, jak ustawić tło witryny jako jednolity kolor, obraz, gradient lub animację koloru.

Do kroku

Metoda 1 z 4: ustawienie jednolitego koloru tła

1. Otwórz plik HTML w swoim ulubionym edytorze tekstu. Od wersji HTML5 atrybut HTML bgcolor> nie jest już obsługiwany. Kolor tła, podobnie jak wszystkie inne aspekty stylu Twojej strony, należy ustawić za pomocą CSS.
2. Dodaj style> / style> oznacza Twój dokument. Wszystkie dane dotyczące stylu Twojej strony (w tym kolor tła) powinny być zakodowane w tych tagach. Czy masz styl> znaczniki już wskazane, możesz po prostu przewinąć do tej części pliku.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Wpisz element „body” wewnątrz style> / style> tagi. Wszystko, co zmienisz w elemencie „body” w CSS, wpłynie na całą stronę.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Dodaj właściwość „background-color” do elementu „body”. W tym kontekście będzie działać tylko jedna pisownia „koloru” (nie: kolor).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Umieść żądany kolor tła za „background-color”. Możesz teraz wskazać nazwę koloru (Zielony, niebieski, wyditp.), użyj kodów szesnastkowych (szesnastkowych) (np. #000000 dla czarnego, # ff0000 dla koloru czerwonego itp.) lub wpisując wartość RGB koloru (np rgb (255,255,0) dla koloru żółtego). Poniżej znajduje się przykład z kodami szesnastkowymi, dzięki którym tło jest takie samo jak baner wikiHow:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

   • Biały: #FFFFFF
   • Jasnoróżowy: # FFCCE6
   • Spalona Sienna: #993300
   • Indygo - # 4B0082
   • Fioletowy - # EE82EE
   • Sprawdź selektor kolorów HTML w3schools.com, aby znaleźć kody szesnastkowe dowolnego koloru.
6. Użyj opcji „background-color”, aby zastosować kolory tła do innych elementów. Tak jak ustawiasz element body, możesz użyć koloru tła do ustawienia tła innych elementów. Po prostu umieść te elementy w style> / style> z właściwością background-color.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {kolor tła: pomarańczowy; } p {kolor tła: rgb (255,0,0); } / style> / head> body> h1> Ten nagłówek ma pomarańczowe tło / h1> p> Ten akapit ma czerwone tło / p> / body> / html>

Metoda 2 z 4: użycie obrazu jako tła

1. Otwórz plik HTML w edytorze tekstu. Wiele osób woli używać obrazu jako tła swojej witryny internetowej. Dzięki temu możesz ustawić wzór, teksturę, zdjęcie lub dowolny inny obraz jako tło. Począwszy od HTML5, wszystkie tła muszą być ustawione za pomocą CSS (kaskadowych arkuszy stylów) w pliku style> / style> tagi.
2. Dodaj style> / style> do pliku HTML. Wszystkie dane dotyczące stylu Twojej strony (w tym kolor tła) powinny być wskazane w tych tagach. Czy już styl> tagi, przewiń do tej części pliku.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Wpisz element „body” wewnątrz style> / style> tagi. Wszystko, co zmienisz w elemencie „body” w CSS, wpłynie na całą stronę.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Dodaj właściwość „background-image” do elementu „body”. Podczas dodawania tej właściwości będziesz potrzebować nazwy pliku swojego obrazu. Upewnij się, że obraz jest zapisany w tym samym folderze co plik html (lub dodaj pełną ścieżkę do pliku na serwerze sieciowym).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); background-color: # 93B874; } / style> / head> body> / body> / html>

   • Dobrym pomysłem jest dołączenie kodu kolor tła na wypadek gdyby obraz tła się nie załadował.
5. Nakładaj wiele obrazów na warstwy. Możesz układać wiele obrazów jeden na drugim. Może to być przydatne, jeśli masz obrazy z przezroczystym tłem, które uzupełniają się po nałożeniu.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); background-color: # 93B874; } / style> / head> body> / body> / html>

   • Pierwszy obraz jest na górze. Drugi obraz znajduje się poniżej pierwszego.

Metoda 3 z 4: Utwórz tło gradientowe

1. Użyj CSS, aby utworzyć tło gradientowe. Jeśli szukasz czegoś bardziej stylizowanego niż jednolity kolor, ale nie tak zajętego jak animacja koloru, wypróbuj tło gradientowe. Gradienty to kolory, które zmieniają się na inne równości. Możesz użyć CSS do tworzenia i dostosowywania gradientu. Zanim zaczniesz tworzyć gradient kolorów, powinieneś zdobyć wystarczającą wiedzę na temat podstaw formatowania strony internetowej za pomocą CSS.
2. Zapoznaj się ze standardową składnią. Podczas tworzenia gradientu potrzebne będą dwie informacje: punkt początkowy i kąt początkowy oraz kolory, między którymi nastąpi przejście. Możesz wybrać wiele kolorów, które nakładają się na siebie, a także określić kierunek lub kąt gradientu.

   tło: gradient liniowy (kierunek / kąt, kolor1, kolor2, kolor3 itd.);

3. Utwórz gradient pionowy. Jeśli nie wskażesz kierunku, kolor będzie przebiegał od góry do dołu. Różne przeglądarki mają różne wersje funkcji gradientu, więc będziesz musiał dodać różne wersje kodu.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Jest to wymagane, aby gradient obejmował całą stronę * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: gradient liniowy (# 93B874, # C9DCB9); / * Domyślna składnia (musi być ostatnia) * / background-color: # 93B874; / * Dobrym pomysłem jest ustawienie koloru tła, na wypadek gdyby gradient się nie ładował * /} / style> / head> body> / body> / html>

4. Utwórz gradient z kierunkiem. Dodanie kierunku do gradientu umożliwia dostosowanie sposobu przesuwania się koloru. Zwróć uwagę, że różne przeglądarki różnie interpretują kierunki. Wszystkie będą miały ten sam gradient kolorów.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } body {background: -webkit-linear-gradient (po lewej, # 93B874, # C9DCB9); / * od lewej do prawej * / background: -o-linear-gradient (po prawej, # 93B874, # C9DCB9); / * koniec po prawej * / background: -moz-linear-gradient (po prawej, # 93B874, # C9DCB9); / * koniec po prawej * / background: gradient liniowy (po prawej, # 93B874, # C9DCB9); / * przesuwa się na prawą stronę * / background-color: # 93B874; / * dobrym pomysłem jest ustawienie koloru tła, na wypadek gdyby gradient się nie załadował * /} / style> / head> body> / body> / html>

5. Użyj innych właściwości, aby dostosować gradient. Z gradientami możesz zrobić dużo więcej.
   • Na przykład możesz nie tylko użyć więcej niż dwóch kolorów, ale także umieścić procent za każdym z nich. Dzięki temu możesz wskazać, ile miejsca zajmie każdy segment koloru.

     tło: gradient liniowy (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Dodaj przezroczystość do kolorów. Dzięki temu możesz wyblaknąć kolory. Użyj tego samego koloru, aby zniknąć z koloru do zera. Pokochasz tę funkcję rgba () należy użyć, aby wskazać kolor. Wartość końcowa określa stopień przezroczystości: 0 dla nieprzezroczystych i 1 dla przezroczystych.

     tło: gradient liniowy (w prawo, rgba (147,184,116,0), rgba (147,184,116,1));

Metoda 4 z 4: Ustaw kolorową animację jako tapetę

1. Nawigować do styl> w swoim kodzie HTML. Jeśli znajdziesz jednolity kolor tła, ale nie, poeksperymentuj ze zmianą kolorowego tła. Począwszy od HTML 5, kolory tła muszą być zdefiniowane za pomocą CSS (Cascading Style Sheets). Jeśli nigdy nie ustawiałeś koloru tła za pomocą CSS, przeczytaj sekcję o ustawianiu jednolitego koloru tła przed wypróbowaniem tej metody.
2. Dodaj właściwość animacja do elementu „body”. Będziesz musiał dodać 2 różne właściwości, ponieważ każda przeglądarka wymaga innego kodu.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: zmiana kolorów 60s nieskończona; animacja: zmiana kolorów 60s nieskończona; } / style> / head> body> / body> / html>

   • -webkit-animation właściwość jest wymagana dla przeglądarek opartych na Chrome (Chrome, Opera, Safari). animacja jest standardem dla wszystkich innych przeglądarek.
   • zmiana koloru w tym przykładzie nazywamy animacją.
   • 60s to czas trwania (60 sekund) animacji / przejścia. Upewnij się, że ustawiłeś to zarówno dla zestawu webkit, jak i dla domyślnej składni.
   • nieskończony wskazuje, że animacja powinna się powtarzać w nieskończoność. Jeśli wolisz zapętlić kolory, a następnie zatrzymać się na ostatnim kolorze, możesz pominąć tę część.
3. Dodaj kolory do swojej animacji. Teraz użyjesz reguły @keyframes, aby ustawić kolory tła, które mają przejść, a także czas, przez jaki każdy kolor będzie widoczny na stronie. Ponownie będziesz musiał dodać wiele kodowań dla różnych przeglądarek.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: zmiana kolorów 60s nieskończona; animacja: zmiana kolorów 60s nieskończona; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

   • Zwróć uwagę, że dwie linie (@ -webkit-keyframes i @keyframes mają te same wartości kolorów tła i wartości procentowych. Powinien pozostać jednolity, aby wrażenia pozostały takie same dla wszystkich przeglądarek.
   • Procenty (0%, 25%itp.) reprezentują całkowity czas trwania animacji (60s). Po załadowaniu strony tło będzie miało ustawiony kolor 0% i (# 33FFF3). Po odtworzeniu 25% lub 60 sekund animacji tło zmieni się na # 78281F, i tak dalej.
   • Możesz dostosować czas trwania i kolory według potrzeb.