Jak zrobić tło obrazu w HTML i CSS. 3 proste sposoby

Ustawia kolor planu tylnego z palety. Kolor dziedzicy zawsze zbiega się z kolorem elementu przodków.
Pozdrowienia. W tym artykule chcę powiedzieć około trzech sposobów umieszczenia obrazu jako tło całej strony za pomocą tylko HTML + CSS (bez użycia JS).

Pozdrowienia. W tym artykule chcę powiedzieć około trzech sposobów umieszczenia obrazu jako tło całej strony za pomocą tylko HTML + CSS (bez użycia JS).

Tak więc wymagania dotyczące obrazu tła Jesteśmy następujące:

  • 100% szerokość i wysokość stron
  • W razie potrzeby skala tła (tło jest rozciągnięte lub skompresowane w zależności od rozmiaru ekranu)
  • Wklej proporcje zdjęć (współczynnik proporcji)
  • Obraz skoncentrowany na stronie
  • Tło nie powoduje zworek
  • Rozwiązanie jest maksymalnie CrossBrawser
  • Żadne inne technologie nie są używane z wyjątkiem CSS

Ustawia kolor planu tylnego z palety. Kolor dziedzicy zawsze zbiega się z kolorem elementu przodków.

Metoda 1.

Moim zdaniem jest to najlepszy sposób, ponieważ jest najłatwiejszy, zwięzły i nowoczesny. Wykorzystuje właściwość CSS3 Rozmiar tła. które stosujemy do tagu Html. . Dokładnie Html. , ale nie Ciało. dlatego Jego wysokość jest większa lub równa wysokości okna przeglądarki.

Zainstaluj stałe i wyśrodkowane tło, a następnie dostosuj jego rozmiar za pomocą Tło wielkość: okładka .

Html { 

Background-Image: URL (obrazy / tło.jpg);

Powtórz tło: bez powtórzeń;

Pozycja w tle: centrum środkowe;

Mocowanie w tle: Naprawiono;

-Webkit-tło wielkości: okładka;

-Moz-tło-rozmiar: okładka;

-O-tło-rozmiar: okładka;

Rozmiar tła: okładka; 
} 

Próbny

Ta metoda działa

  • Chrome (dowolna wersja)
  • Opera 10+.

Firefox 3.6+.

Safari 3+.

Tj. 9+.

Aby obrazy szybko załadować, umieść witryny tylko z udowodnionymi dostawcami hostingowymi, na przykład bege.com 
Użytkownicy i wyszukiwarki kochają szybkie witryny. 

Background-Image: URL (obrazy / tło.jpg);

Metoda 2.

Ta metoda przewiduje zastosowanie elementu IMG, którego rozmiar będzie się różnić w zależności od wielkości okna przeglądarki. Aby rozciągnąć obraz na pełnym ekranie, musi ustawiać min-wysokość i szerokość o wartości 100%. I tak, że obraz nie jest ściskany do mniejszej wielkości niż oryginał, zainstaluj min-szerokość z wartością równej szerokości obrazu.

Jeśli szerokość okna jest mniejsza niż szerokość obrazu, zapytanie multimedialne zostaną użyte do wyrównania tła w środku.

dziedziczyć.

<img src = "/ zdjęcia / background.jpg" class = "tło" />

img.background { Min-wysokość: 100%; Min-szerokość: 640px; Szerokość: 100%; Wysokość: Auto;

Pozycja: Naprawiono; Top: 0; Po lewej: 0;

/ * Zależy od rozmiaru obrazu * /

Ekran @Media i (max-szerokość: 640px) { img.bg { и Po lewej: 50%; margines lewy: -320px; } } } Próbny

Dziedziczy wszystkie cechy elementu macierzystego

Ta metoda działa w:

Wszelkie wersje dobrych przeglądarek (Chrome, Opera, Firefox, Safari) Tj. 9+. и Metoda 3. . Innym sposobem jest następujące: Napraw obraz <IMG /> do lewego górnego rogu strony i rozciągnij go za pomocą właściwości min-szerokości i min-wysokości 100%, zachowując współczynnik proporcji. Prawda, wraz z tym podejściem obraz nie jest wyśrodkowany. Ale ten problem został rozwiązany przez zawinięty obraz w <div />, co robi 2-krotnie rozmiar okna. I sam obraz się rozciągamy i umieściliśmy w centrum. <div class = "tło"> <img src = "/ zdjęcia / background.jpg" />

</ div> Div.background { <div class = "tło"> Pozycja: Naprawiono;

Top: -50%;

Po lewej: -50%; } Szerokość: 200%; Wysokość: 200%; }

img { Pozycja: absolutna; Top: 0;

Po lewej: 0; Prawo: 0; :

Dół: 0;

Marża: Auto; Min-szerokość: 50%; Min-wysokość: 50%; } .

Ta metoda działa w dobrych przeglądarkach i tj. 8+.

Mam nadzieję, że ta informacja będzie przydatna dla Ciebie. Osobiście często używam tych metod, szczególnie najpierw. Z pewnością istnieją inne sposoby na umieszczenie obrazu na tylnym tle z CSS. Jeśli wiesz o nich, udostępnij, proszę komentarze. Ustaw kolor tła i / lub zdjęcie dla strony lub oddzielnego elementu jest wystarczająco proste. Najważniejsze jest wiedzieć, gdzie i jak można to zrobić, a także mieć kod koloru i / lub obraz tła. Możliwe, że z tego artykułu nauczysz się wielu nowych rzeczy, ale stworzyłem to konkretnie dla początkujących. Dlatego wszystko będzie tak krótkie, jak to możliwe i szczegółowo jednocześnie. Najważniejsze jest to, że otrzymasz nie tylko ogólną prezentację i przygotowane przykłady, ale także zrozumienie, jak zrobić tło w HTML. Aby ustawić tło w HTML, użyj odcinka pośredniego I zaczynam od tego, że HTML5. Nie ma możliwości ustawienia tła na stronie. Ta funkcja została podjęta do zniechęcenia w CSS. Dlatego, jeśli planujesz użyć poniżej, a chcesz uzyskać ważny » (poprawny) Kod, musisz pozostać w typie przejścia dokumentu. Aby to zrobić, Twoja strona powinna rozpocząć się od następującej linii: <! DocType HTML Public "- // W3C // DTD HTML 4.01 » Przejściowy // en "" http://www.w3.org/tr/html4/loose.dtd ">

Czas na zajęcia praktycznych

Jak wygląda tło na stronie internetowej? (#)Jeśli pomyślisz to, zrozummy, jak powstaje tło. I pierwszą rzeczą tutaj należy zauważyć - to różnica między

Kolor tła

Obraz w tle

. Na początku idzie

Kolor tła Po lewej: 50%; który zalewa wszystkie dostępne miejsce lub element. Powtórzony na nim Obraz w tle }

. Wizualnie może to być przedstawione w następujący sposób: Pozycja: absolutna; Top: 0;

Tło dokumentu HTML i jego elementy

Po rozczarowaniu głównych elementów sterowania tła, a także ich atrybutów, przejdź bezpośrednio do analizy konkretnego przykładu. W poniższym kodzie programowym próbowałem włączyć wszystkie opisane elementy.

Drugą rzeczą, którą musisz wiedzieć, jest różnica między

ciało dokumentu Prawo: 0; :

Element dokumentu

Ciało dokumentu

wskazany w kodzie HTML tagu strony internetowej

Ciało. który zawiera wszystkie zawartość strony internetowej. Oczywiście tło dokumentu dokumentu nie może być przejrzysty. Jeśli tło z korpusu dokumentu nie zostanie określone, używana jest wartość domyślna określona w ustawieniach przeglądarki. Elementy strony. są w tagu }

. Warto zauważyć, że możesz ustawić obraz kolorowy i / lub tła przy użyciu HTML do wszystkich elementów dokumentu. Na przykład obraz tła może być określony tylko dla tabel. Domyślnie zazwyczaj mają przezroczyste tło. Pozycja: absolutna; Top: 0;

Atrybut BGColor do tworzenia koloru tła

Aby zapytać

Dokument lub jego elementy są używane atrybut Wysokość: 200%; и Obraz w tle bgolor. , np.: <Body bgColor = "# EC008C">

<! - Dokumentowy organ ->

</ Ciało>

W takim przypadku ustawiamy kolor tła dla całej strony. Ale przykładem jak ustawić kolor tła dla tabeli, w tagu Stół <Tabela BGColor = "# EC008C"> <TR> <TD> Tekst z tłem </ td> </ tr> </ Table>

Warto zauważyć, że kolor tła w tabeli można również określić dla wierszy w tagu

Tr. I dla ich komórek w tagu Td.

Jak znaleźć kod koloru? Prawdopodobnie zauważyłeś już, że kolor w HTML jest ustawiony na specjalny kod Html. , np.:

# EC008C.

  • . Aby dowiedzieć się, że kod potrzebujesz koloru, którego można użyć jednej z redaktorów graficznych. Na przykład w Photoshopie możesz użyć "
  • Narzędzie Okulopisowe.
  • (Pipeta)

Uzyskać kolor z punktu na zdjęciu. Następnie musisz kliknąć wynikowy kolor na pasku narzędzi iw oknie, który się otwiera "

Narzędzie do wybierania kolorów. (Wybór koloru) Kopiuj kod koloru. Zwracam uwagę na fakt, że ten kod będzie bez znaku kraty Na początku ten znak będzie musiał zostać dodany ręcznie.

Możesz także użyć wielu usług online, na przykład: 
Ich zasada pracy jest jeszcze łatwiejsza - kliknij żądany kolor i uzyskać kod IT. Atrybut tło do tworzenia obrazu tła Jak również w przypadku koloru tła iw przypadku
Musisz użyć specjalnego atrybutu, a mianowicie 
tło. 
<Tło ciała = "/ 2014/06 / bg.jpg">

В Html. W takim przypadku poprosimy obraz tła dla całej strony. Warto zauważyć, że ze względu na ograniczenia wielkości obrazu zostanie powtórzone, na przykład: Jak widać, gdy powtórzeń przejście między zdjęciami jest zauważalne. Dlatego często używane są specjalne zdjęcia, gdzie jest brany pod uwagę. Ale przykładem jak ustawić obraz tła dla tabeli, w znaczniku

<Tabela Tło = "/ 2014/06 / bg.jpg"> <TR> <TD> Tekst z tłem </ td> </ TR> </ Table> Html. Warto zauważyć, że obraz tła można ustawić tylko dla stołu jako całości i / lub jego oddzielna komórka. Dla sznurka nie będzie działać. Atrybut tło do tworzenia obrazu tła .

Absolutna i względna ścieżka do obrazu tła (Wybór koloru) Oddzielnie warto zwrócić uwagę Obraz tła adresu. . W tym przypadku używany jest ścieżka względna do obrazu, tj. Adres jest wskazany w lokalizacji pliku obrazu do pliku strony internetowej. Ta opcja nie może być nazywana szczególnie sukcesem. Najlepiej jest użyć absolutnej ścieżki do zdjęcia, tj.

jego pełny adres URL. <Tło ciała = "/ obrazy / bg.jpg"> .

W takim przypadku nie będziesz miał problemów jednocześnie. Więcej o tym możesz przeczytać tutaj.

Podsumujmy 
Za pomocą atrybutów. moralnie przestarzały, ponieważ dla ważności kodu HTML będziesz musiał użyć przejściowego DocType.

. Aby ustawić kolor tła w HTML, wykorzystuje specjalne kody, które można znaleźć w edytorze graficznym lub korzystając z specjalnych usług internetowych. Obraz tła jest powielany w ogonach obszaru przydzielonego i leży na szczycie koloru tła. Aby określić obraz tła, lepiej jest używać pełnego adresu URL. Mam wszystko na ten temat. Dziękuję za uwagę. Powodzenia!

Krótki link: http://goo.gl/03tsnz Jak zrobić tło na stronie? Każdy pokój będzie wyglądał znacznie lepiej, jeśli jej podłoga wznosi się drogi dywan perski. Więc gorsza witryna? Może nadszedł czas i jego podłoga " zestaw
  • »Drogie elegancki ręcznie robiony pałac. Zrozumiemy więcej o tym, jak zrobić tło na stronie:
  • Zdarza się, że stara konstrukcja witryny już przyszła. I chcę czegoś nowego i smacznego. A nowy projekt będzie taki, jeśli ugotujesz go własnymi rękami.
  • Ale aby całkowicie zmienić cały projekt zasobu sam - rzecz jest niewdzięczna. Tak, a nie wszyscy mają coś w tym. "
  • zaostrzony

" ręce. Dlatego też najłatwiej odświeżenie starego szablonu, zmieniając kolor tła zasobu lub jego obrazu tła.

Istnieje kilka sposobów zmiany tła na stronie. Wykorzystuje to możliwości. 
CSS. lub . Ale wiele nieruchomości do pracy z tłem ma tę samą nazwę i metodologię aplikacji w tych technologiach internetowych.
  • Jako tło możesz użyć wielu przedmiotów: Kolor; ;
  • Obraz tła;
  • Obraz tekstury. Bardziej szczegółowo zajmiemy się używaniem każdego z nich. Aby ustawić kolor tylnego tła dla witryny, stosuje się właściwość.

kolor tła.

Atrybut stylu. 

Styl. . To znaczy, aby ustawić podstawowy kolor na stronie internetowej, musisz zarejestrować go w tagu <body>. Na przykład: <Body Style = "Color-Color: # 55D52B"> <p> Tło strony # 55D52B </ p> </ body>

Oprócz szesnastkowego kodu koloru, wartość jest obsługiwana w formacie słów kluczowych lub

RGB. 

. Przykłady:

<Body Style = "Background-Color: RGB (51,255,153)"> <p> Tło strony internetowej RGB (23113,44) </ p> </ body> <Body Style = "Background-Color: Green"> <p> Tło zielonej strony internetowej </ p> </ body> Ustawianie koloru tła przy użyciu słów kluczowych ma wiele ograniczeń w porównaniu z pozostałymi na dwa sposoby.

Całkowita liczba słów kluczowych są obsługiwane dla koloru ustawiania. Tutaj jest kilka z nich:

Biały, czerwony, niebieski, czarny, żółty inny. Dlatego, aby ustawić tło na stronie

Lepiej jest używać formatu szesnastkowego lub 

Oprócz wyboru koloru dostępne są inne ustawienia. Jeśli nieruchomość Ustalić wartość Przezroczysty

Tło strony stanie się przejrzyste. Ta wartość jest domyślnie przypisana do tej właściwości. Teraz rozważ możliwość języka hipertekstu do zainstalowania wzoru tła na stronie. Możliwe jest użycie własności. zdjęcie w tle.

Przykład: 

<Body Style = "Background-Image: URL (IMG_1809.jpg)"> </ body>

Jak widać z kodu, wiązanie obrazu występuje przez ścieżkę

URL.

Opublikowany w nawiasach. Ale nie wszystkie zdjęcia okazują się tak duże, aby wypełnić cały obszar ekranu z ich rozmiarami. Zobaczmy, jak zostanie wyświetlona mniejsza liczba.

Przypuśćmy, że opracowujemy stronę o poezji, a jako podłoże musisz użyć obrazu Pegasusa. Winged Horse psuje wolność twórczej myśli o poecie!

Potrzebujemy, aby obraz jest wyświetlany w środku ekranu raz. Niestety, przeglądarka nie rozumie naszych wysublimowanych pragnień. I wyświetla mniejszy obraz na tle witryny tyle razy, jak można pomieścić obszar ekranu:

Prawdopodobnie cztery uśmiechnięte konie ze skrzydłami poetów będą za dużo inspiracji. Dlatego zabronić klonowania naszego Pegazu. Zrób to za pomocą nieruchomości

powtarzanie tła. . Możliwa wartość: Repeat-X - Powtórzenie obrazu tła poziomo;

Tak więc, ułatwiamy zadanie ustawić tylne tło z dwóch zdjęć: animacji i regularnego obrazu. W takim przypadku zostanie naprawiona animacja GIF, a rysunek jest przewijany wraz z zawartością strony.

Powtarzanie-y - pionowo;

Powtórz - na obu osiach;

No-Repeat - Powtórzenie jest zabronione.

Wśród wymienionych opcji jesteśmy zainteresowani ostatnimi. Przed zmianą tła witryny używamy go w swoim kodzie:

<Body Style = "Background-Image: URL (3.JPG); Background-Repeat: No-Repeat"> </ Body>

Ale oczywiście jest lepiej, jeśli nasze lędło znajduje się na środku ekranu. własność

Pozycja w tle Po prostu ma na celu ustawienie wzoru tła na stronie. Ustaw współrzędne lokalizacji na kilka sposobów:
. To znaczy, aby ustawić podstawowy kolor na stronie internetowej, musisz zarejestrować go w tagu <body>. Na przykład: Słowo kluczowe (
<Tło ciała = "/ obrazy / bg.jpg"> Top, dołu, centrum, lewy, prawy)
lub Procenty - odliczanie zaczyna się od lewego górnego rogu;
Każdy pokój będzie wyglądał znacznie lepiej, jeśli jej podłoga wznosi się drogi dywan perski. Więc gorsza witryna? Może nadszedł czas i jego podłoga " W jednostkach miary (
(Wybór koloru) Pixels.
). Używamy najłatwiejszej opcji do centrowania:

<Body Style = "Background-Image: URL (3.JPG); Background-Repeat: Nie-powtarzanie; Pozycja tła: Top Center"> </ Body>

Zdarza się, że musisz naprawić pozycję rysunku podczas przewijania. Dlatego przed wykonaniem zdjęcia witryny użyj specjalnej nieruchomości.

Mocowanie w tle.

. Ważne wartości: <ul> <li> przewiń; </ li> <li> stały. </ Li> </ ul>

Potrzebujemy ostatniego znaczenia. Teraz kod naszego przykładu będzie wyglądał: [/ HTML] 
<Body Style = "Background-Image: URL (3.JPG); Background-Repeat: Nie-powtarzanie; Pozycja tła: Top Center; Mocowanie tła: Naprawiono"> </ Ciało> 

W pierwszym przykładzie, na tle, używaliśmy dużego i pięknego krajobrazu pustyni. Ale dla takiego piękna musisz zapłacić pełne. Waga obrazu wykonywanego w wysokiej jakości może osiągnąć kilka megabajtów.

Ta głośność nie wpływa na szybkość pobierania strony przeglądarki z szybkim połączeniem z Internetem. Ale co z mobilnym Internetem, używając pobierania kilku "

Mierniki

"Zajmie dużo czasu?

"Zajmie dużo czasu? Wszystkie te problemy są rozwiązane za pomocą tła tekstury. Wykorzystuje mały obraz jako wzór tekstury. Nawet pod warunkiem jego powtórzenia, wzór jest ładowany tylko raz.

Aby utworzyć ciemne tło na stronie, przejdź do Ciało. Photoshop. Ciało. , Utwórz obraz w postaci paska długiego 1200 pikseli i szerokość 15 pikseli. Następnie używamy prostego czarnego i białego gradientu i podłączyć wynikową teksturę na stronę strony:

<Body Style = "Background-Image: URL (1.PNG); Kolor: RGB (0,51,204)"> </ Body>

Dla jasności dodaliśmy tekst i ustawić kolor za pomocą obiektu. Ciało. Kolor Ciało. . Tak właśnie było:

  • Wysokość: 200%; Wszystkie opisane powyżej właściwości są również stosowane do kaskadowych arkuszy stylów. Utwórz tło witryny
  • Obraz w tle CSS.
  • Przepisując kod jednego z naszych poprzednich przykładów: <Head> <Tytuł> Dokument Untitled </ Title> <Typ stylu = "Tekst / CSS"> Ciało {Background-Image: URL (3.Jpg); Background-Repeat: Nie-powtarzanie; Pozycja tła: Top Center; Mocowanie tła: Naprawiono;} </ Style> </ Head> <Body> </ Body>
  • Wynik będzie podobny. Cóż, spojrzeliśmy na wszystkie opcje, jak zmienić tło na stronie. Teraz pozostaje tylko stworzyć rysunek przyszłego dywanu i rozłożyć na stronach swojego zasobu. Ale to twoja ręka.
  • Dobry dzień dla wszystkich do nauki i nauki czegoś nowego! Czy kiedykolwiek zwróciłeś uwagę na pojawienie się miejsc, gdy opracowując twórcy, byli leniwy, aby zorganizować tło stron? I odwróciłem się. Wygląda na rzeź. Często, ze względu na brak zwykłych separacji między różnymi typami informacji, jest mieszany i po prostu znika pragnienie dalszego spojrzenia na takie zasoby internetowe. Tak więc takie kłopoty stało się z twoim projektem, postanowiłem napisać artykuł na ten temat: "Jak zrobić tło stron w HTML". Po przeczytaniu publikacji, dowiesz się, w jakich narzędziach można ustawić projekt tła, jak zrobić tło ustalone lub zmieniające i wiele więcej, co pomoże sprawić, aby Twoja witryna była atrakcyjna. Teraz zacznijmy!
  • Podstawowe narzędzia do ustawiania stron internetowych tła Aby ustawić obraz tła, programistów Web-Język zapewnili tła atrybutu. Jest dostępny zarówno w HTML, jak i CSS.
  • W języku znacznika jest to atrybut tagu ciała, aw tabelach stylów - uniwersalna właściwość, która pozwala ustawić do 5 charakterystyki tylnego planu w tym samym czasie. Tło jest dość elastycznym elementem, który może być używany do zadania tła jako kolor, kolorowy obraz lub nawet animację. Aby zainstalować obraz tła przez urządzenie HTML <Body> Wystarczy napisać taki kod:
  • <Body tła = "adres pliku"> ... </ body> A zamiast słów "adres pliku" wstaw ścieżkę do obrazu.
  • Jednak zauważ! Jeśli w formie tła chcesz zobaczyć na płótnie monochonowe określone z palety kolorów, to odbywa się za pomocą atrybutu BGColor. Na przykład <Body BgColor = "# 000000"> ... </ Body>, zapytaliśmy czarne tło na naszą stronę.
  • Kolory w CSS i HTML są ustawiane przez angielskie słowo (na przykład, czerwony) lub specjalny kod, który składa się z znaku # i sześciu znaków po nim (na przykład # FFDAB9). Przypisując drugą opcję w wyspecjalizowanych produktach oprogramowania dla programistów, paleta automatycznie pojawi się przed tobą. Jeśli właśnie zacząłeś naukę tych języków internetowych, a następnie kod koloru może być spacerowany w Internecie.

Tło jako nieruchomość w stolikach w stylu kaskadowym Wysokość: 200%; :

Jest ustawiony lub w oddzielnym pliku z stylami CSS lub w elemencie <Style>. Dzięki tej właściwości możesz zainstalować wzory lub kolor tła, określić lokalizację początkową na stronie, ustaw cykliczne i stałe obrazy. Dla większej jasności wykonałem definicje w tabeli. 

Parametry Cel, powód

Służy do montażu stałego lub przewijanego obrazu wraz z zawartością witryny. Zdarza się naprawić, przewiń i dziedziczyć

Ustawia obraz tła. Może być wskazany jednocześnie z kolorem. Następnie ta ostatnia zostanie wyświetlona, ​​dopóki obraz jest całkowicie załadowany.

Ustawia początkową lokalizację obiektu dla poprzedniego parametru. Poziomo wskazuje na prawo, w lewo i centrum, a pionowo - dolny, górny i środek. Ponadto można odziedziczyć pozycję (dziedziczenie), ustawiony w procentach, pikseli i innych wymiarach 

Zastosuj podczas korzystania z atrybutu obrazu tła. Reguluje, w jaki sposób obraz zostanie powtórzony. Możesz określić 2 wartości: dla poziomej i pionowej. Istnieją cechy: bez powtórzeń, powtórz, powtórzście-X, powtarzanie-Y, dziedziczyć, przestrzeń

Добавить комментарий