Witam, drodzy czytelnicy bloga. Dzisiaj przyjrzymy się pięciu regułom CSS, które pozwalają ustawić tło dla dowolnego elementu w HTML - położenie tła (obrazek, powtórzenie, kolor, załącznik). Cóż, nie zapomnijmy również wspomnieć o złożonej regule tła.
Nie ma w tym nic skomplikowanego, ale są pewne subtelności i niuanse, które musisz znać i już gotowy szablon(pamiętaj o tym, co pomoże odkryć wszystkie tajniki każdego projektu).
Przypominam jeszcze raz, że ten artykuł jest częścią serii i najlepiej byłoby zacząć naukę znaczników stylu od początku, a mianowicie od artykułu o tym, czym jest CSS i do czego się go używa, a następnie postępować w podanej kolejności w podręczniku. Chociaż w każdym razie to zależy od Ciebie, ale teraz porozmawiajmy o ustawieniu tła.
Kolor, kolor tła i obraz tła
Zobaczmy najpierw, jak ustawić Kolor HTML elementy za pomocą Zasady kolorów CSS. Tak naprawdę wszystko jest tutaj proste. Składnia jest całkowicie normalna i można ustawić kolor zgodnie z tym, jak zostało to zrobione w danym języku znaczniki hipertekstowe. Jak pamiętacie, umieszczane po znaku skrótu (hash - „#fe35a3”) lub przy użyciu trzech cyfr, jeśli pierwsza pokrywa się z wartością drugiej, trzecia z czwartą, a piąta odpowiednio z szóstą ( kod koloru „#aa33ff” można krótko zapisać jako „a3f”).
Również kolory w kodzie HTML i CSS można przedstawić w formie słów (na przykład „czerwony”), ale najczęściej używany jest kod szesnastkowy:
Kolor:#303
Przykładowo pokolorowałem ten mały akapit tym samym kolorem co powyżej (#303). Jest teraz nieco inny niż kolor wszystkich pozostałych akapitów (ciemniejszy), który w pliku CSS, którego używam, jest ustawiony na #555 Motywy WordPressa. Ale ustawienie koloru za pomocą koloru jest dość proste, ale z tłem będzie nieco bardziej skomplikowane.
Więc, dla tła w CSS Istnieje pięć zasad, które w razie potrzeby można połączyć w jedną. Aby je zobaczyć, możesz przejść do aktualnej strony specyfikacji W3C i poszukać czegokolwiek ze słowem Tło:
- kolor tła - za pomocą tej reguły ustawiasz kolor tła dla dowolnego elementu HTML. Można użyć kodu lub nazwy odcienia, tj. wszystko jest dokładnie takie samo, jak przy użyciu koloru.
obraz tła - dzięki niemu możesz użyć obrazka jako tła (ale koniecznie przeczytaj o tym, ponieważ ciężkie obrazy spowalniają ładowanie stron), ścieżka do której zostanie wskazana w funkcjonalności url().
Jeśli spojrzysz na specyfikację, zobaczysz to domyślny kolor tła dowolny element będzie przezroczysty (domyślna wartość reguły to „kolor tła: przezroczysty”). To prawda, że \u200b\u200bw elementach domyślnie nie będzie przezroczysty, ponieważ Są to elementy systemu i wszystko w nich jest inne i różni się od zwykłych znaczników hipertekstowego języka znaczników.
Kolor tła jest ustawiony standardowo (sześć lub trzy cyfry kodu szesnastkowego lub słowo):
Kolor tła: #FEFCDE
Na przykład tło tego akapitu jest określone za pomocą koloru tła z kodem koloru podanym tuż powyżej.
Wszystkie pozostałe cztery reguły CSS będą dotyczyły jedynie obrazu tła, który można ustawić dla dowolnego elementu HTML i w razie potrzeby precyzyjnie ustawić. Za pomocą można określić, który plik graficzny będzie używany zdjęcie w tle.
Jeśli spojrzysz na specyfikację języka znaczników, zobaczysz, że obraz tła domyślnie ma wartość „none” (tj. w tle nie jest używany żaden obraz). Cóż, jeśli nadal tego potrzebujesz, to w funkcji url() będziesz musiał wskazać ścieżkę do tego:
Obraz tła:url(https://site/image/comment_top_focus.gif);
Przykładowo do tego akapitu użyłem pliku graficznego z tłem, do którego ścieżka została opisana tuż powyżej. Widzisz, że cały obszar przeznaczony na ten akapit jest pokryty powtarzającym się obrazem, który w oryginale wygląda tak:
Te. w przypadku stosowania tylko jednej reguły obrazu tła wskazującej ścieżkę do pliku graficznego, ten sam obraz będzie mnożony zarówno w pionie, jak i w poziomie, aż obejmie cały obszar przydzielony na stronie internetowej dla tego konkretnego elementu HTML (w naszym przykładzie było to paragraf). Dlaczego to się dzieje?
Powtórz w tle - powtórz obraz tła
Tak, ponieważ nie określiliśmy żadnej wartości reguły CSS powtarzanie tła, co oznacza, że zostanie dla niego użyta wartość domyślna. Patrząc na specyfikację, dowiadujemy się, że ta wartość odpowiada „powtórzeniu” (powtórzeniu obrazu na wszystkich osiach). Odpowiedź przyszła naturalnie.
Dlatego dzięki powtórzeniu w tle możemy to zrobić zarządzaj powtórzeniami obrazów tła. Zasada ta może mieć tylko cztery znaczenia:
Pozycja tła - pozycjonowanie tła
Teraz pojawia się pytanie, czy można odsunąć obraz tła od lewej strony? górny róg obszar ograniczający wielkość elementu. Oczywiście, że można i istnieje w tym celu osobna zasada. pozycja tła:
Patrząc na specyfikację CSS staje się jasne, dlaczego obraz tła domyślnie jest dociskany dokładnie do lewej górnej krawędzi obszaru elementu HTML. Ponieważ „0% 0%” jest wartością domyślną dla reguły pozycji tła.
Otóż, gdy ta reguła nie jest jawnie ustawiona dla elementu (jak w naszym przypadku), to przeglądarka wybiera jego wartość, co jest domyślnie akceptowane w specyfikacji (pamiętaj, że osie współrzędnych w CSS podawane są dokładnie od lewej górnej krawędzi elementu obszaru).
Ze specyfikacji wynika również, że do pozycjonowania obrazu tła za pomocą pozycji tła można używać zarówno wartości względnych (procentowych), jak i bezwzględnych (na przykład ). Cóż, możesz także użyć słów, które będą odpowiadać określonym wartościom cyfrowym. Ale najpierw najważniejsze.
Podczas ustawiania położenia obrazu tła używając jednostek absolutnych w pozycji tła stosuje się następującą zasadę w celu określenia jego ostatecznej pozycji:
Te. przeglądarka obliczy określone przesunięcia wzdłuż osi X i Y od początku obszaru, w którym znajduje się obiekt, do początku samego obrazu. Na przykład w tym akapicie umieściłem obraz tła poprzez położenie tła, korzystając z następujących reguł CSS:
Obraz tła:url(https://site/image/logo.png); powtarzanie w tle: brak powtórzeń; pozycja tła: 400px 25px;
Należy pamiętać, że w tym przypadku zostanie on wyrównany do środka obszaru wyświetlania, a nie do środka obszaru przeznaczonego na te akapity. Oczywiste jest, że w rzeczywistości takie umieszczenie obrazu tła jest mało prawdopodobne.
Jeśli jednak ustawisz stałą pozycję tła dla elementów takich jak Body czy Html (czyli w tagach pokrywających całą stronę), to obraz ten będzie zawsze widoczny w viewporcie i właśnie do tego służy załącznik CSS-tło nieruchomość w nowoczesnym układzie blokowym.
Czy jest jeszcze coś? prefabrykowana reguła Tło, co pozwala połączyć w jednej butelce wszystkie pięć opisanych powyżej zasad. Co więcej, wartości dla wszystkich pięciu w wersji łączonej można stosować w dowolnej kolejności i w dowolnej ilości (są unikalne i przeglądarka nie pomyli ich ze sobą). Wszystko, czego nie określisz wyraźnie, zostanie przyjęte przez przeglądarkę jako wartość domyślna.
PNG) bez powtórzeń 50%;
Dla przejrzystości w tym akapicie zastosowano przykładową regułę dotyczącą prefabrykatów. Nie wyszło ładnie, ale nie to jest najważniejsze. W tym akapicie zastosowano dziwne żółte tło oraz obraz logo Liveinternet wyrównany do środka akapitu. Ponieważ Jeśli reguła dołączania w tle nie ma podanej żadnej wartości, używana jest wartość przewijania (domyślna).
Jeśli dla jakiegoś elementu chcesz ustawić tylko wypełnienie kolorem i nie zawracać sobie głowy obrazem tła, możesz to zrobić zamiast tego:
Kolor tła: #FEFCDE
pisać:
Tło: #FEFCDE
Ponieważ wszystkie inne wartości reguły prefabrykatów zostaną przyjęte domyślnie i tego właśnie potrzebowałeś.
Powodzenia! Do zobaczenia wkrótce na stronach bloga
Możesz być zainteresowany
Styl listy (typ, obraz, pozycja) - Reguły CSS do dostosowywania wygląd listy w kodzie HTML Jak skonfigurować naprzemienny kolor tła wierszy tabel, list i innych elementów HTML na stronie przy użyciu pseudoklasy nth-child 
Pozycja (bezwzględna, względna i stała) - sposoby pozycjonowania elementów HTML w CSS (reguły lewa, prawa, góra i dół) 
Płynnie i przejrzyście w CSS - narzędzia do układania bloków 
Pozycjonowanie za pomocą indeksu Z i reguły kursora CSS w celu zmiany kursora myszy 
Wypełnienie, margines i obramowanie — ustawione Wewnętrzny CSS i zewnętrzne, a także ramki ze wszystkich stron (góra, dół, lewa, prawa) 
Wyświetl (blok, brak, inline) w CSS - ustaw typ wyświetlania elementów HTML na stronie internetowej 
Priorytety w CSS i ich wzrost dzięki Ważnym, kombinacji i grupowaniu selektorów, stylów użytkownika i autora 
CSS - co to jest, jak łączyć się z kaskadowymi arkuszami stylów Kod HTML za pomocą stylu i łącza 
Selektory tagów, klas, identyfikatorów i uniwersalnych oraz selektory atrybutów we współczesnym CSS
krótka informacja
Wersje CSS
Wartości
url Wartość jest ścieżką do plik graficzny, który jest określony wewnątrz konstrukcji url(). Ścieżkę do pliku można zapisać w cudzysłowie (podwójnym lub pojedynczym) lub bez nich. brak Wyłącza obraz tła dla elementu. inherit Dziedziczy wartość elementu nadrzędnego.HTML5 CSS2.1 IE Cr Op Fx
Model obiektowy
document.getElementById("elementID ").style.backgroundImage
Przeglądarki
Internet Explorera do wersji 7.0 włącznie, stosuje tło do wewnętrznej krawędzi elementu, który ma ustawioną właściwość hasLayout. Jeśli element nie ma hasLayout , właściwość tła-image będzie uwzględniać granice elementu, jak określono w specyfikacji. Różnica w wyświetlaniu będzie zauważalna, jeśli krawędzie będą przerywane lub kropkowane, a nie jednolite.
Jeśli element jest ustawiony na przewijanie lub auto , Internet Explorer 8 będzie miał jednopikselowe opóźnienie w pionie podczas przewijania tła.
Wersje przeglądarki Internet Explorer do wersji 7.0 włącznie nie obsługują wartości dziedziczenia.
Jeśli tło jest ustawione dla wiersza tabeli (tag
HTML5 CSS2.1 IE Cr Op Fx
| 1 | 2 | 3 |
Wynik ten przykład V Przeglądarka Chrome pokazany na ryc. 1. Przeglądarka internetowa Explorer, Opera i Firefox poprawnie wyświetlają tło linii (ryc. 2).
Ryż. 1. Powtórz tło dla każdej komórki
Ryż. 2. Tło dla całej linii
Myślę, że nie ma ani jednego miejsca, w którym nieruchomość nie byłaby wykorzystywana Tło CSS. Wydawałoby się, że co może być prostszego niż ta nieruchomość? Ale nie, jego możliwości są znacznie szersze niż zwykłe przypisanie obrazka lub koloru jako tła strony. Niektóre rzeczy będą znajome, inne zaś będą prawdopodobnie dla wielu nowe. W każdym razie przydatne będzie dokładne poznanie działania tła.
CSS3 wniósł wiele nowych rzeczy do właściwości, takich jak przezroczystość i przypisanie kilku obrazów jako tła, ale porozmawiamy o tym poniżej, ale najpierw przyjrzymy się podstawom właściwości tło.
kolor tła
Jestem więcej niż pewien, że już nie raz przypisałeś kolor tła. Można to zrobić, stosując kilka rodzajów notacji: zwykłą (używana jest nazwa koloru), notację szesnastkową lub notację RGB. Każdy typ jest równoważny, użyj tego, który najbardziej Ci odpowiada. Staram się używać najkrótszej opcji i dla łatwiejszej percepcji wynikowy plik stylu jest nieco mniejszy.
P (kolor tła: czerwony;) p (kolor tła: #f00;) p (kolor tła: #ff0000;) p (kolor tła: rgb(255, 0, 0;))
CSS3 obsługuje przezroczystość, więc możemy dodać ją do naszego koloru, na przykład tak:
P (kolor tła: rgba(255, 0, 0, 0.5);)
Ostatnia cyfra ustawia przezroczystość na 50%. Możesz ustawić wartość przezroczystości od 0 (w pełni przezroczyste tło) na 1 (całkowicie nieprzezroczysty).
zdjęcie w tle
Właściwość ta jest również bardzo często wykorzystywana, pozwala na przypisanie obrazu do tła. CSS3 dodał możliwość przypisania wielu obrazów do tła, każdy tworząc własną warstwę, dzięki czemu każdy kolejny nachodzi na poprzedni. Dlaczego może to być przydatne? Wszystko jest dość proste - powiedzmy, że musisz wkręcić małe dodatki w każdy róg witryny. Biorąc pod uwagę mniej więcej gumowaty układ, użycie jednego obrazu nie wchodzi w grę. Dlatego tworzymy 4 „warstwy”, każdy obraz przenosimy do osobnego rogu i to wszystko, problem rozwiązany
Treść (obraz tła: url("image1"), url("image2"), url("image3")
Jeśli trzeba przypisać jeden obraz do tła, pozostawiamy w kodzie tylko pierwszy, myślę, że jest to zrozumiałe.
Wykorzystując dowolne obrazy jako tło, należy pamiętać o dwóch zasadach:
- ustaw kontrastowy kolor tła na wypadek, gdyby użytkownik z jakiegoś powodu nie widział obrazu. Może po prostu wyłączyć wyświetlanie zdjęć, oszczędzając ruch.
- nie używaj obrazu tła do przekazywania czegokolwiek ważna informacja. Z powodów podanych powyżej użytkownik może tego nie zobaczyć.
Obsługa wielu obrazów tła jest dość obszerna. Wszystkie przeglądarki, nawet IE8, obsługują tę właściwość.
Wprowadź słowa kluczowe.