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 Anuluje obraz tła

dla elementu.

HTML5 CSS2.1 IE Cr Op Fx

obraz tła

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.

dla elementu.

1

2

3

), to Chrome, Safari, iOS wyświetlają go niezgodnie ze specyfikacją, czyli dla każdej komórki osobno. Podczas gdy przeglądarka powinna wyświetlać jednolite tło dla całego wiersza. Przykład 2 pokazuje kod demonstrujący błąd. Tło dla TR 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 Ryż. 1. Powtórz tło dla każdej komórki obraz tła: Ryż. 1. Powtórz tło dla każdej komórki <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | nic;

| żaden | dziedziczyć;

| nic Opis właściwość obrazu tła.

(od angielskiego „obraz tła” ‒ „obraz tła”)

ustawia obraz tła elementu

Notatka

Ponieważ CSS3 (oddzielone przecinkami) można określić wiele obrazów tła na raz. Spowoduje to, że dolne obrazy tła będą widoczne przez przezroczyste obszary górnych obrazów tła.

JavaScript

[obiekt].style.backgroundImage="[wartość]";

Obsługa przeglądarki

Specyfikacja

Wartości

Wszystkie wartości CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

Brak Wskazuje, że nie ma obrazu tła. adres URL(

) Określa ciąg URI obrazu wewnątrz „url(...)”.

obraz tła: url(myImage.png); Adres URL("

") Określa ciąg URI obrazu wewnątrz " url(...) ". Ciąg URI jest oddzielony znakami " " " PODWÓJNYCH CYTATÓW.

obraz tła: url("myImage.png ");

Dziedzicz Określa, że ​​element powinien dziedziczyć ustawienia swojego elementu nadrzędnego. Wartość początkowa:

"nic".

Przykład użycia

właściwość obrazu tła

Obraz tła

> Lista kodów>

Dokument z wieloma obrazami tła.

Projektowanie strony internetowej zaczyna się od tła. Prawidłowe byłoby określenie koloru tła – właściwości kolor tła , jako zabezpieczenie, jeśli obraz się nie załaduje. W nawiasach adres URL()

wskaż ścieżkę do folderu ze zdjęciami.

Domyślnie obraz będzie się powtarzał jak „kafelek”, aż wypełni cały ekran przeglądarki, w miarę przesuwania się w dół strony nasz „kafelek” będzie wypełniał zarówno drugi, jak i trzeci ekran, dokładnie do momentu wyczerpania się zawartości strony; . Oczywiste jest, że taki wynik nie jest szczytem myśli projektowej i nie będziemy mieli „łazienki”, a po prostu bloga, gdzie czytelność jest bardzo ważnym punktem. Prostą opcją pozbycia się „kafelków” jest użycie dużego obrazu o szerokości co najmniej 1024 px, tak aby wypełniał cały ekran. To też będzie dobra decyzja

znajdź płynną teksturę, po pomnożeniu wzór będzie wyglądał jak jedna całość.

Jak uatrakcyjnić tło?

• Dzięki Bogu, że mamy w tym pomocników: bez powtórzeń
• – wyłącz powtarzanie powtórz-x
• – powtarzanie wzoru tylko w poziomie powtórz-y

– powtarzanie wzoru tylko w pionie

Na przykład:

Nagłówek bloga

Jest to tekstura tła, która powtarza się tylko w poziomie. Następny pomocnik - własność pozycja tła , umożliwia pozycjonowanie obraz tła

gdziekolwiek na ekranie. Technika ta jest szeroko rozpowszechniona we współczesnym projektowaniu stron internetowych. Mamy zdjęcie, ale nie jest ono częścią treści, a służy jedynie jako dekoracja witryny.

Nagłówek

Przykład niepowtarzającego się tła z zadanym położeniem.

Wcięcie od prawej krawędzi ustawione jest na 200 px, aby tekst nie kolidował z tłem.

Jeśli chcemy, aby obraz był zawsze widoczny podczas przewijania ekranu w dół, musimy dodać właściwość do powyższego kodu - załącznik w tle: naprawiony;

Jaka jest różnica pomiędzy obraz I obraz tła?

Różnica jest zasadnicza, tagu obraz wprowadzany bezpośrednio do ciała HTML-strona i odpowiada za treść (ilustracje, zdjęcia, awatary), niesie ze sobą ładunek semantyczny. Bardzo ważne jest, aby obraz był zaindeksowany wyszukiwarki i wsiadłem wyniki wyszukiwania. Właściwości Obraz tła CSS– aby strona była wyjątkowa i piękna, czyli jest to projekt, który należy przenieść do pliku zewnętrznego CSS style lub użyj wewnątrz elementu styl.

Oczywiście nie oznacza to tego obraz tła nie będzie działać, jeśli zostanie umieszczony w ciele HTML-strony. Zdecydowanie zalecam jednak wzięcie pod uwagę wszystkiego, co jest związane z projektowaniem CSS. W rezultacie otrzymamy czystość HTML-kod:

• będzie to miało pozytywny wpływ na indeksowanie witryny; boty wyszukiwania pokochają Twoją witrynę i będą ją częściej odwiedzać.
• Twoi odwiedzający również będą zadowoleni, strona będzie ładować się szybciej ze względu na niewielką wagę.
• Jako webmasterowi łatwiej jest pracować z czystym kodem.

Cóż, rozważaliśmy mniej więcej wszystkie opcje wykorzystania nieruchomości Obraz tła CSS. Więcej ćwiczeń, przyjaciele! Zachęcamy do kopiowania kodu i tworzenia własnych odmian!