371 Shares 9938 views

przezroczystość tła CSS. Przezroczyste tło lub tekst z CSS

Wraz z pojawieniem się CSS3 projektantów stron internetowych działa na wiele sposobów stało się łatwiejsze i bardziej logiczne: po wszystkim, teraz naprawdę można elastycznie dostosować dowolny obiekt, rzadziej uciekania się do JavaScript. Powiedzmy, że trzeba ustawić przezroczystość tła – CSS natychmiast oferuje kilka opcji.


Tło zdefiniowane przez zestaw atrybutów (tła obrazu, tło-pozycji , t wielkości, t-powtarzających tła mocujących, t-pochodzenia, t-zaciskowych, kolor tła), z których każdy może być przypisane oddzielnie lub w połączeniu zgodnie z atrybutem tło. Przyjrzyjmy się każdej z nich w szczegółach.

Atrybutu background-color

W CSS, kolor tła można ustawić na kilka sposobów: Używając kod szesnastkowy, nazwa koloru lub RGB wjazdu. W CSS3 stało się możliwe wykorzystanie zamiast opcji RGB nagrywania z RGBA.

Hex kod koloru są zapisywane w nieruchomości po siatce: background-color: # FFDAB9. Jeśli bohaterowie tego wpisu są takie same pary, kod jest zwykle trochę cut: # ccff00 można zapisać jako # cf0:

body {background-color: # cf0 ;}.

Nazwa jest, nawet w najbardziej egzotycznych kolorach. Na przykład, oprócz średnia czerwone i białe można użyć NavajoWhite (#FFDEAD) lub Honeydew2 (# E0EEE0):

body {background-color: purple; }.

Ta ostatnia opcja jest wejście RGB lub RGBA pozwala określić nie tylko kolor, ale także przezroczystość tła CSS, ale metoda działa tylko w wersjach starszych niż IE 9. Inne przeglądarki rozpoznać normalną wersję z przejrzystości. Zgodnie z standardami W3C zaleca się używać nadal RGBA zamiast częściej spotykanych RGB.

Ostatnią wartość RGBA tle i ustawia przezroczystość w zakresie od 0 (przezroczysty) do 1 (nieprzezroczysta).

Istnieją pewne nietypowe wartości. Kolor tła można ustawić za pomocą HSL i niskostopowych. Zarówno dodano CSS 3, a zatem nie są obsługiwane przez IE wersji 9 lub wyższym. Przykłady wykonania identyczne RGB lub RGBA tylko w innym formacie: Barwa (odcień – wartość na kole kolorów, jest podana w stopniach), nasycone (nasycenie – intensywność koloru jako procent, od 0 do 100), Jaskrawość (lekkość – jasność, mierzonej podobnie parametr nasycają ).

Atrybutu background-image

Najbardziej wersja cross-browser z przezroczystym tłem – to jest wykorzystanie obrazu. W CSS3, można ustawić nawet więcej obrazów, odbywa się to poprzez przecinkami. Przykład:

{Tła obrazu ciała: adres URL (bg1.png), domową (bg2.png)}.

W ten sposób wspierać nawet IE8. Kilka obrazów w tle gumy stosowanej w układzie. Co ważne, nie zapomnij użyć dowolnego obrazu i ustawić kolor tła w CSS, a użytkownicy mogą po prostu przesłać obraz.

Atrybutu background-position

Jeśli używasz obraz, aby ustawić jednostkę tła, CSS pozwala na umieszczenie obrazu w dowolnym miejscu na ekranie. Domyślnie obraz znajduje się w lewym górnym rogu. Atrybut bierze ani instrukcji słownych (góra, dół, lewo, prawo), A numerycznej (odsetki, piksele i inne jednostki). W takim przypadku należy podać dwie wartości, poziome i pionowe:

Ciało {t pozycji: prawy środek ;} – W tym przykładzie, wzór będzie znajdować się po prawej stronie, na stronie górnej i dolnej w odległości do tego samego obrazu.

Atrybutu background-rozmiar

Czasami konieczne jest, aby rozciągnąć tło CSS lub zmniejszenia jej rozmiaru. Aby to zrobić, należy użyć atrybutu background-rozmiar i wielkość tła można ustawić w pikselach lub w procentach, oraz wszelkie inne jednostki.

Z tego atrybutu, istnieją pewne problemy: na prawidłowe wyświetlanie tła we wcześniejszych wersjach prefiksów przeglądarek być używany. Oczywiście obecna wersja w pełni obsługuje tego atrybutu i potrzeba specyficznych właściwościach zniknął.

Atrybutu background-attachment

Atrybut ten określa zachowanie obrazów tła podczas przewijania. Tak więc, może to trwać 3 wartości (nie licząc dziedziczenia, łącznie dla wszystkich atrybutów omawianych w tym artykule):

  • stałe – sprawia, że obraz na tle stałej;
  • przewijania – tło zwoje z resztą elementów;
  • miejscowy – obraz w tle jest przewijane jeśli ma przewijanie zawartości. Tło, które wykracza poza treść ramki jest stała.

Przykład zastosowania:

Ciało {t-nasadka} stałym.

Obecnie Firefox nie obsługuje ostatnią właściwość (lokalne).

Atrybutu background-origin

Ta cecha odpowiada na elemencie podtrzymującym. Wczesne przeglądarek wymagają wykorzystania prefiksów. Sama nieruchomość posiada trzy parametry:

  • Wypełnienie skrzynki jest umieszczona w stosunku do wzorca krawędzi, biorąc pod uwagę grubość ramy;
  • Właściwości granicznych pole różni się od poprzedniego tym, że linia graniczna może być całkowicie lub częściowo nakładają się na siebie wzorca;
  • Zawartość skrzynki pozycjonowanie obrazu pryavyazyvaya jego zawartość.

Jeśli podasz wiele wartości, wówczas przeglądarka może reagować na swój sposób: Firefox i Opera dostrzec tylko pierwszą opcję.

Atrybutu background-repeat

W postaci zasady, jeśli obraz tła jest ustawiony, muszą być powtarzane w poziomie lub w pionie. Z tego i stosować atrybutu background-repeat. Zatem blok tło, CSS, który zawiera taką właściwość może mieć jedną z kilku parametrów:

  • no-repeat – na stronie w jednej wersji pojawi się obraz;
  • powtórzyć – t powtarza się w kierunkach x, y;
  • wielokrotnym x – w pozycji poziomej;
  • powtórzyć Y – tylko w pionie;
  • przestrzeń – tło jest powtarzany, ale jeśli przestrzeń jest niemożliwe do wypełnienia między zdjęciach pojawiają się puste;
  • runda – obraz jest skalowany, jeśli nie wypełnia całego obszaru całych obrazów.

Przykład atrybutów:

Ciało {t powtarzania: NIE wielokrotnego Powtórzyć} – podobny tła powtarzania: Y.

W CSS3 może określić wartości dla wielu obrazów podczas wyświetlania parametrów, rozdzielając je przecinkami.

Atrybutu background-clip

Atrybut definiuje zachowanie tle pod granicami (na przykład w przypadku ramy przerywanymi)

  • padding-box – tło wyświetlane we wnętrzu bloku;
  • border-box – obraz jest w ramach;
  • content-box – obraz w tle pojawi się w treści.

Przykład zastosowania:

Ciało {tła zacisk: content- skrzynki;}.

Chrom i Safari wymagają -webkit- prefiks.

Atrybuty krycia i filtr

atrybut nieprzezroczystość pozwala ustawić przezroczystość tła – właściwość CSS będzie działać we wszystkich przeglądarkach. Ta wartość jest ustalona w zakresie od 0,0 do 1,0 włącznie. W tym przypadku można ustawić przezroczystość tła CSS nie wartość całkowita zamiast 0,3 wystarczy napisać .3:

.block {background-image: url ( img.png); zmętnienie: 0,3;}.

Aby ustawić przezroczystość tła, CSS jest odpowiedni nawet dla IE poniżej wersji dziewiąty użyć atrybutu filtra:

.block {background-image: url ( img.png); Filtr: alfa (zmętnienie = 30)}.

W tym przypadku wartość zadymienia jest ustawiony w zakresie od 0 do 100. Należy zauważyć, że krycie przypisywać różne ustawienia przezroczystości poprzez RGBA dziedziczenia: przy użyciu krycie staje się jasne, nie tylko tło, ale również wszystkie elementy wewnątrz urządzenia.

Zawsze monitorować statystyki wykorzystania dla przeglądarek WNP i innych krajach. Największym problemem wszystkich DTP – starsze wersje IE, nie pozwalają na wykorzystanie w pełnym zakresie CSS3. W układzie nie zapomnij skorzystać z usług specjalnych, które sprawdzają, czy przeglądarka obsługuje wszystkie właściwości CSS. Jeśli nie można zainstalować starsze wersje przeglądarek znajdziesz usługę, która będzie sprawdzać strona działa w wielu przeglądarkach Internecie.