Wraz z pojawieniem się prac CSS3 DTP na wiele sposobów stało się łatwiejsze i bardziej logiczne: przecież można teraz zrobić, aby elastycznie skonfigurować obiekt, rzadziej uciekają do JavaScript.Powiedzmy, że trzeba ustawić przezroczystość tła - CSS natychmiast oferuje kilka opcji.
tło zdefiniowana przez zbiór atrybutów (background-image, background-position, background-size, background-repeat, background-attachment, tło, pochodzenia, background-clip, background-color), z których każdy może być przepisany samodzielnie lubzjednoczyć się pod tym samym tle atrybutu.Przyjrzyjmy się każdej z nich bardziej szczegółowo.
atrybutu background-color
W CSS, kolor tła można ustawić na kilka sposobów: za pomocą kodu w systemie szesnastkowym, nazwy kolorów lub RGB-entry.W CSS3 stało się możliwe wykorzystanie zamiast opcji nagrywania z RGB-RGBA.
kod szesnastkowy koloru jest napisane w nieruchomości po siatce: background-color: # FFDAB9.Jeśli znaki w parach pasuje taki rekord, kod jest zazwyczaj nieco krój: # ccff00 można zapisać jako # CF0:
body {background-color: # CF0;}.
nazwa istnieje, nawet w najbardziej egzotycznych kolorów.Na przykład, oprócz średnia czerwony i biały, można użyć NavajoWhite (#FFDEAD) lub Honeydew2 (# E0EEE0):
ciało {background-color: purple;}.
ostatnia opcja RGB lub nagrywać RGBA pozwala określić nie tylko kolor, ale również przejrzystości CSS tła, ale sposób, do pracy w IE 9 tylko starsze wersje.Inne przeglądarki rozpoznaje normalny wariant z przejrzystości.Zgodnie ze standardami W3C korzystnie jest używać tych samych rgba zamiast spotykanych RGB.
ostatnia wartość w RGBA ustawia krycie tle i od 0 (przezroczyste) do 1 (nieprzezroczyste).
Istnieje kilka niezwykłych wartości.Kolor tła mogą być określone za pomocą HSL i niskostopowych.Zarówno dodano CSS 3, a więc nie są obsługiwane przez IE wersji 9 lub wyższym.Opcje są identyczne jak w RGB lub RGBA, tylko w innym formacie: Hue (odcień - wartość na kole kolorów, jest podana w stopniach), Nasycenie (Saturation - intensywności zabarwienia w procentach od 0 do 100), lekkość (lekkość - jasność, mierzona w podobny parametr nasycenia).
atrybutu background-image
najbardziej wersji cross-browser z przezroczystym tłem - jest wykorzystanie obrazu.W CSS3, można określić jeszcze więcej zdjęć, odbywa się to za pomocą przecinka.Przykład:
body {background-image: url (bg1.png), url (bg2.png)}.
obsługuje tego nawet IE8.Kilka zdjęć jak na tle stosowanych w układzie gumy.Co ważne, nie zapomnij do korzystania z obrazu, jak ustawić w kolorze tła CSS, ponieważ użytkownicy mogą po prostu przesłać zdjęcie.
atrybutu background-position
Jeśli używasz obrazu zdefiniować blok tła, CSS pozwala na umieszczenie obrazu w dowolnym miejscu na ekranie.Domyślnie obraz znajduje się w lewym górnym rogu.Atrybut przyjmuje żadnych werbalnych wskazówek (góra, dół, lewo, prawo) lub numerycznej (procentowe, pikseli i inne jednostki).Należy podać dwie wartości dla poziomej i pionowej:
body {background-position: tuż centrum;} - w tym przykładzie, w tle będzie zlokalizowane w prawej części strony, z góry iz dołu odległości do obrazu są takie same.
atrybutu background-size
Czasami trzeba użyć CSS, aby rozciągnąć tło lub zmniejszenia jej rozmiaru.W tym celu, atrybut tła wielkość i wielkość może być zdefiniowana jako tło pikseli lub procent, lub w dowolnej innej jednostce miary.
Z tego atrybutu, są pewne problemy: do prawidłowego wyświetlania tła w starszych przeglądarkach należy użyć prefiksu.Oczywiście, obecne wersje pełni popieram ten atrybut i zapotrzebowanie na specyficzne właściwości zniknął.
atrybutu background-attachment
Atrybut ten określa zachowanie obrazu tła podczas przewijania.Na przykład, może to potrwać 3 wartości (z wyłączeniem dziedziczenia, w sumie wszystkich atrybutów w tym artykule):
- stałe - sprawia, że obraz na tle stałe;
- przewijania - przewija się w tle z resztą elementów;
- lokalne - obraz w tle jest przewijany, jeżeli przewijanie jest treść.Tło, które wykracza poza treść jest ustalona.
Przykład użycia:
body {background-attachment stałe}.
Obecnie Firefox nie obsługuje najnowszą nieruchomości (lokalnej).
atrybutów tła pochodzenia
Cecha ta jest odpowiedzialna za położenia elementu.Przeglądarki wcześniejsze wersje wymagają wykorzystania prefiksów.Sama nieruchomość ma trzy parametry:
- padding-box pozycje od krawędzi tle, biorąc pod uwagę grubość ramy;
- właściwości border-box różni się od poprzedniej tym, że linia graniczna może być całkowicie lub częściowo pokrywać tło;
- pozycjonowanie treści obrazu pryavyazyvaya pole jego treść.
przypadku określenia wartości wielokrotne, przeglądarka może reagować na swój sposób: Firefox i Opera przyjmuje tylko pierwszą opcję.
atrybutu background-repeat
Z reguły, jeśli obraz tła jest określony, musi być on powtórzony w poziomie lub pionie.Z tego i użył atrybutu background-repeat.Tak więc, blok tło, CSS, który zawiera taką właściwość może mieć jedną z kilku opcji:
- no-repeat - na stronie w jednej postaci pojawia się obraz;
- powtórz - wzór powtarza się w X i Y;
- repeat-x - tylko w poziomie;
- repeat-y - tylko w pionie;
- miejsca - wzór powtarza, ale jeśli nie wypełnia przestrzeń, to nie są puste przestrzenie między zdjęciami;
- runda - obraz jest skalowany, jeśli nie wypełnia całego obszaru całego obrazu.
Przykład atrybutu:
body {background-repeat: no-repeat repeat} - podobnie background-repeat: repeat-y.
W CSS3 może określić wartości dla wielu obrazów, jeśli parametry przesyłu oddzielone przecinkami.
atrybutu background-clip
Atrybut ten określa zachowanie tle pod granice (na przykład, w przypadku przerywanych klatek):
- padding-box - tło wyświetlane wewnątrz bloku;
- border-box - wchodzi w zakres obrazu;
- zawartości skrzynki - obraz w tle pojawia się tylko w treści.
Przykład użycia:
ciała {background-clip: content-box;}.
Chrom i Safari wymagają wykorzystania -webkit- prefiksu.
atrybut krycie i filtr atrybut krycia
pozwala ustawić przezroczystość tła - właściwości CSS działa we wszystkich przeglądarkach.Wartość regulowana od 0.0 do 1.0 włącznie.Z tego można ustawić przezroczystość tła CSS bez wartości całkowitej zamiast 0,3 wystarczy napisać .3:
.block {background-image: url (img.png);krycie: 0,3;}.
Aby ustawić przezroczystość tła, CSS jest odpowiedni nawet dla IE poniżej wersji dziewiątej, użyj filtru atrybutu:
.block {background-image: url (img.png);Filtr: alpha (przezroczystość = 30);}.
W tym przypadku, krycie jest ustawiony w zakresie od 0 do 100. Należy zauważyć, że krycie przypisywać różne ustawienia przezroczystości poprzez RGBA dziedziczności: krycie za pomocą przezroczystego tła jest nie tylko, ale także wszystkie elementy wewnątrz urządzenia.
Zawsze upewnij się, że statystyki użytkowania przeglądarka WNP i wszystkich innych krajach.Największym problemem wszystkich DTP - starsze wersje IE, nie pozwalają w pełni korzystać z CSS3.Jeżeli układ nie zapomnij skorzystać z usług specjalnych, które sprawdzają, czy Twoja przeglądarka jest własnością CSS.Jeśli nie możesz zainstalować starsze wersje przeglądarek, otrzymasz usługę, która sprawdza działanie witryny w różnych przeglądarkach w Internecie.
