Tło jest ważną częścią strony internetowej. Domyślnie ma biały kolor. Ale język HTML oferuje kilka opcji zmiany jego właściwości. W Internecie większość witryn - z kolorowym tłem, w tym animacją. Mają różne grafiki lub obrazy tła. Ustawienie stylu tła dla stron internetowych odbywa się za pomocą atrybutu - tło w HTML. Istnieje kilka właściwości CSS, które służą do ustawiania tła elementu.
Atrybuty zmiany ustawień tła
W kodzie napisanym w HTML, tło jest ustawione dla całej strony, jak również dla jej poszczególnych elementów. Wcześniej używano do tego znacznika, ale teraz ta praktyka jest uważana za przestarzałą. Atrybut został zastosowany do specyfikacji 401 i został zarejestrowany w HTML :. Teraz najłatwiejszym sposobem zmiany wartości domyślnej jest ustawienie właściwości atrybutu kolor tła dla tagu.
Istnieje pięć głównych atrybutów używanych w HTML i CSS do zmiany tła:
-color - pokazuje, który kolor będzie używany do zalewania;
-image - ustawia obraz tła;
-position - wskazuje, gdzie umieścić obraz tła;
-repeat - określa, czy obraz jest powtarzalny;
-attachment - określa, czy obraz będzie przewijany razem ze stroną;
-size - ustawia tło do określonej wielkości;
-origin - określa obszar do pozycjonowania obrazu tła;
-clip - Określa, w jaki sposób obraz tła lub kolor tła jest wyświetlany pod granicami elementu.
Po pierwszepięć właściwości można połączyć w jeden krótki atrybut - tło. Atrybut ten działa w przeglądarkach Firefox, Safari, Opera, IE8. Tylko w przestarzałych IE7 i IE6 tło nie zawiera granic.
Jak zmienić kolor tła w HTML
Atrybut "kolor tła" (HTML i CSS) wypełnia strony jednolitym kolorem. Istnieje kilka sposobów ustawienia koloru w różnych formatach:
-kolor: czerwony;
-color: rgb (00255);
-kolor: # 2500ff.
Właściwość przezroczystą można ustawić dla tła, która odpowiada stopniowi przezroczystości i umożliwia widoczność wszystkich elementów pod spodem.
Jak ustawić obraz tła
Obraz tła to właściwość, która pozwala określić obraz, który będzie wyświetlany zamiast tła. Jest określony przy użyciu kodu CSS i języka HTML: background-image: url (image.jpg). Kod jest bardzo prosty, ale aby działał, obraz powinien znajdować się w tym samym folderze co pliki ze stylami. Jeśli tak nie jest, nawiasy muszą podać poprawny adres, na przykład: background-image: url (images /image.jpg). Obraz tła może być używany w połączeniu z kolorem tła. Jeśli się nie powtórzy, wówczas drugi, nieobjęty przestrzenią obrazu, będzie miał kolor określony w tej właściwości.
Tło
Atrybut CSS i pozycja tła HTML kontrolują położenie obrazu tła i określają, gdzie znajduje się on w elemencie. Użyj go, aby określić położenie lewego górnego rogu obrazu względem lewego górnego rogu elementu. Po pierwsze, w obiekcie pozycja jest zapisywana na poziomej osi współrzędnych, a następnie - na pionie. Aby to zrobićłatwiej używać pikseli. Na przykład:
-pozycja: 0 0 - używane domyślnie i wskazuje położenie tła w lewym górnym rogu elementu;
-pozycja: 100px 0 - przesuń obraz w prawo;
-pozycja: -100px 0 - przesuń obraz w lewo;
-pozycja: 0100px - obniż obraz.
Atrybut pozycji tła działa również z innymi wartościami, słowami kluczowymi i wartościami procentowymi. Mogą być użyteczne, jeśli rozmiar elementu nie jest określony w pikselach.
Jak używać słów kluczowych do pozycjonowania tła
Słowa kluczowe mogą być używane do określenia współrzędnych na osi poziomej i pionowej, nie ma znaczenia, w jakiej kolejności są rejestrowane. Odmiany słów kluczowych dla osi poziomej:
w lewo;
centrum;
w prawo.
Dla osi pionowej:
góra;
centrum;
na dole.
Podczas pracy z innymi jednostkami miary, współrzędne są najpierw określone na osi poziomej, a następnie na pionie. Na przykład położenie tła: u dołu po prawej. Stopy procentowe są stosowane w ten sam sposób. W takim przypadku odliczanie znajduje się w lewym górnym rogu okna przeglądarki. Przykład wykorzystania zainteresowania: tło-pozycja: 100% 50%. Oznacza to, że obraz przesuwa się w prawo i znajduje się pośrodku prawej części elementu. Ten sam efekt można uzyskać, korzystając z właściwości: right center. Jeśli użyjesz wartości położenia tła: 100% 100%, tło pojawi się w prawym dolnym rogu elementu.
Powtórz tło
Domyślnie, gdy obraz jest ustawiony najakość tła, powtarza się zarówno w poziomie, jak iw pionie, dopóki całe okno lub element przeglądarki nie zostanie wypełniony. Czasami jednak wymagane jest, aby obraz był wyświetlany tylko jeden raz lub znajdował się tylko w jednym kierunku. Aby to zrobić, CSS i HTML dla tła wymagają następujących atrybutów:
-repeat: repeat - domyślnie obraz jest powtarzany, aż element zostanie całkowicie wypełniony;
-repeat: no-repeat - obraz nie jest powtarzany i jest używany tylko na stronie;
-repeat: repeat-x - powtórzenie tylko na osi poziomej;
-repeat: repeat-y - powtórz tylko na osi pionowej;
-repeat: dziedzicz - przeglądarka używa wartości przypisanej do elementu nadrzędnego.
Atrybut paska przewijania
Załącznik HTML na tle określa, co dzieje się z obrazem, gdy użytkownik przewija stronę. Ten atrybut ma kilka właściwości: przewijanie, naprawianie i dziedziczenie. Dziedzicz po raportach, że załącznik w tle dziedziczy własność rodzica. W celu prawidłowego użycia dołączania tła należy zastanowić się, w jaki sposób użytkownik będzie wchodził w interakcję z rzutnią. Przeglądarka to sekcja przeglądarki wyświetlająca stronę internetową. Podczas przewijania strony nie porusza się. Zamiast tego zawartość strony przewija się w górę, ale wygląda na to, że strona przewija się w oknie przeglądarki.
Podczas ustawiania właściwości HTML-załącznik: scroll, przeglądarka informuje, że tło powinno przewijać się wraz z elementem. Tło "przykleja się" do elementu i przewija, aż znika. To wszystkodomyślna wartość dla załączników tła. Ale gdy ustawiona jest właściwość background-attachment: fixed, tło powinno pozostać na swoim miejscu i nie powinno się poruszać wraz z zawartością. Podczas przewijania strony zawsze pozostaje widoczny.
W jaki sposób krótko zanotować właściwości tła
Zamiast konieczności każdorazowego zapisu wszystkich tych reguł oddzielnie, można je połączyć w jeden i zapisać w następujący sposób: tło :. I nie trzeba określać każdej wartości osobno. Jeśli właściwość nie jest używana, zostanie użyta wartość domyślna. Ważne jest, aby pamiętać, że obraz tła pojawia się tylko w tych obszarach, w których występuje element rodzica. Nawet jeśli jest on umieszczony względem okna przeglądarki, nie będzie wyświetlany, jeśli jego element nadrzędny nie jest widoczny. Możesz użyć więcej niż jednego obrazu dla tła przedmiotu w CSS3. Kod będzie taki sam jak CSS2, tylko poszczególne adresy obrazów muszą być oddzielone przecinkiem. Pierwszy będzie umieszczony w górnej części elementu, a następny w niego się połączy.
Właściwość wielkości tła
Czasami witryna musi określać tło o określonej wielkości. Atrybut, który jest używany do tego w HTML - rozmiar tła. Ta właściwość ma wiele możliwych wartości:
-size: include - skaluje obraz tak, aby pasował do elementu, zachowując bitmapowy współczynnik proporcji;
-size: cover - Rozszerza obraz, aby wypełnić element, zachowując proporcje;
-size: 100px 100px - skaluje obraz do określonego rozmiaru;
-size: 50% 100% - Skaluje obraz do określonego rozmiaru, procent odnosi się do rozmiaru elementu.
Rozmiar tła w języku HTML dla przeglądarki Firefox do wersji 4.0 jest ustawiony na wartość inną niż domyślna - wielkość -moz-tła. Podobnie, w przypadku wersji Opera 1053, musisz przepisać -o-rozmiar tła.
własność background-origin
Właściwość background-origin używana jest w połączeniu z pozycją background, aby umiejscowić obraz tła. Dotyczy sytuacji, w której załączenie tła jest ustawione na stałe. Jego parametry można wyprowadzić z granic, wcięć lub zawartości przedmiotu.
-origin: border-box; tło - pozycja jest obliczana od granicy.
-origin: padding-box; tło - pozycja jest obliczana z pola wypełnienia.
-origin: content-box; background - Pozycja jest obliczana na podstawie zawartości elementu.
Opcje korzystania z obrazu tła
Oprócz widocznych zalet dekoracyjnych tła, można go również wykorzystać do innych celów. Na przykład, jeśli dodasz właściwość float CSS do elementów offsetowych, trudno jest zapewnić, że dwie lub więcej kolumn ma tę samą szerokość. Jeśli są różne, tło jednej z kolumn zakończy się przed tłem drugiej. Tego efektu można uniknąć, jeśli używasz osobnego tła dla każdej kolumny. Ale o wiele łatwiej jest zastosować jeden obraz tła do elementu nadrzędnego. Innym możliwym zastosowaniem jest dekorowanie nieuporządkowanych list. Bulwy w nich mogą nie wyglądać bardzo atrakcyjnie, dlatego lepiej je ukryć i zastąpić obrazem tła.
Czcionki zamiast tła w html: czcionka tła
Wybór czcionki dlarejestracja stron w Internecie jest bardzo ograniczona. Możesz tworzyć oryginalne czcionki, ale wymagają one włączenia obsługi javascript. Prostsze rozwiązanie działające w dowolnej przeglądarce - tworząc obraz z tekstu i wykorzystując go jako tło dla elementu. Jeśli chcesz, aby tekst pozostał w znaczniku dla wyszukiwarek i czytników ekranu, po prostu przypisz klasę do elementu, pozostaw tekst w opisie i dodaj obraz za pomocą CSS. W takim przypadku przeglądarki będą wyświetlać napisy przy użyciu czcionek innych niż zdefiniowane przez użytkownika, a mianowicie wybranych przez projektanta.
Nowa właściwość podziału tła
CSS3 ma nową funkcję: elementy można podzielić na pojedyncze bloki, wiersze i strony. Właściwość background-break określa, w jaki sposób tło jest wyświetlane w różnych oknach. Możliwe wartości:
-break: ciągłe - wartość domyślna. Traktuje bloki tak, jakby między nimi nie było miejsca;
-break: bounding-box - uwzględnia odstęp między blokami;
-break: every-box - przetwarza każdy blok w pojedynczym elemencie indywidualnie i ponownie rysuje tło oddzielnie dla każdego z nich.
Istnieje wiele innych właściwości, które pomagają dostosować wygląd tła, oto najczęściej opisywane. Wiedza pochodzi z doświadczeniem, więc praktyka to najlepszy sposób na nauczenie się CSS i HTML.
