Dzień dobry, maniacy tworzenia stron internetowych, a także nowicjusze. Dla tych, którzy nie śledzą trendów w branży IT, a raczej internetowej mody, uroczyście ogłaszam, że niniejsza publikacja dotyczy tematu: „Jak sprawić, by blok css narzędzia” w samą porę dla Ciebie. Rzeczywiście, w bieżącym 2016 roku wprowadzenie różnych przezroczystych obiektów do usług online jest uważane za stylowe posunięcie.
Dlatego w tym artykule opowiem o wszystkich istniejących sposobach tworzenia przejrzystości, zaczynając od przedpotopowych rozwiązań, skupiając się na kompatybilności rozwiązań z przeglądarkami, a także podam konkretne przykłady kodu programu. A teraz do pracy!
Gdy były jeszcze słabe komputery i nie rozwijano „umiejętności”, programiści wymyślili własny sposób tworzenia przezroczyste tło: używaj przezroczystych pikseli na przemian z kolorowymi pikselami. Utworzony w ten sposób blok wyglądał po przeskalowaniu jak szachownica, ale w normalnym rozmiarze wyglądał jak przezroczystość.
To moim zdaniem „kula” oczywiście pomaga w starszych wersjach przeglądarek, które nie działają nowoczesne rozwiązania. Ale warto zauważyć, że jakość wyświetlanego tekstu , wpisane w takie, spada gwałtownie.
W rzadkich przypadkach programiści rozwiązują problem z wprowadzeniem półprzezroczystego obrazu, wstawiając… już gotowy półprzezroczysty obraz! W tym celu wykorzystywane są obrazy zapisane w formacie PNG-24. Ten format graficzny umożliwia ustawienie 256 poziomów przezierności.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Jednak ta metoda nie jest wygodna z kilku powodów:
Najbardziej powszechnym i dobrze znanym sposobem uczynienia bloku przezroczystym jest właściwość nieprzezroczystość.
Wartość parametru zmienia się w przedziale , gdzie przy 0 obiekt jest niewidoczny, a przy 1 jest w pełni widoczny. Jednak tutaj zdarzają się nieprzyjemne momenty.
Po pierwsze, wszystkie elementy potomne dziedziczą przezroczystość. A to oznacza, że wpisany tekst również „prześwituje” wraz z tłem.
Po drugie Internet Explorer znowu kręci nosem i do wersji 8 nie działa nieprzezroczystość.
Aby rozwiązać ten problem, użyj filtr:alfa (Nieprzezroczystość=wartość).
Rozważ przykład.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Obecnie profesjonaliści używają narzędzia rgba (r, g, b, a).
Wcześniej powiedziałem ci, że RGB jest jednym z najpopularniejszych modele kolorów, gdzie R oznacza wszystkie odcienie czerwieni, G odcienie zieleni, a B odcienie niebieskiego.
W przypadku parametr css zmienna A odpowiada za kanał alfa, który z kolei odpowiada za przezroczystość.
Główna zaleta ostatni sposób- kanał alfa nie wpływa na obiekty wewnątrz stylizowanego bloku.
rgba (r, g, b, a) jest obsługiwane, ponieważ:
Chcę zwrócić uwagę na ciekawy fakt! Ukochany Internet Explorer 7 zgłasza błąd podczas łączenia właściwości kolor tła z nazwą kolorów (kolor tła: złoty). Dlatego należy używać tylko:
kolor tła: rgba(255, 215, 0, 0.15)
A teraz przykład.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
W naszym sklepie znajdziesz wszelkiego rodzaju kwiaty.
|
Zwróć uwagę, że zawartość tekstu bloku jest w pełni widoczna (100% czerni), podczas gdy tło jest ustawione na kanał alfa 0,88, tj. 88%.
Ten post dobiegł końca. Subskrybuj mojego bloga i nie zapomnij zaprosić znajomych. Powodzenia w nauce języków internetowych! PA pa!
W tej lekcji przyjrzymy się im css nieruchomości - nieprzezroczystość I RGBA. Nieruchomość Nieprzezroczystość odpowiada tylko za przezroczystość elementów i funkcję RGBA- dla koloru i przezroczystości, jeśli określisz wartość przezroczystości kanału alfa.
Wartość liczbowa dla nieprzezroczystość ustawiony w zakresie od 0,0 do 1,0, gdzie zero to pełna przezroczystość, a jeden to absolutne krycie. Na przykład, aby zobaczyć 50% przezroczystości, musisz ustawić wartość na 0,5. Należy o tym pamiętać nieprzezroczystość propaguje się do wszystkich elementów potomnych rodzica. A to oznacza, że tekst na półprzezroczystym tle również będzie półprzezroczysty. I to już jest bardzo istotna wada, tekst nie wyróżnia się tak dobrze.
Zrzut ekranu wyraźnie pokazuje, że czarny tekst stał się tak samo przezroczysty jak niebieskie tło.
dz (
tło: url(obrazy/twójobraz.jpg); /* Zdjęcie w tle */
szerokość: 750px
wysokość: 100px;
margines: automatyczny;
}
.niebieski(
tło: #027av4; /* Przezroczysty kolor tła */
nieprzezroczystość: 0,3 /* Wartość przezroczystości tła */
wysokość: 70px;
}
h1 (
wypełnienie: 6px
rodzina czcionek: Arial Black;
waga czcionki: pogrubiona;
rozmiar czcionki: 50px;
}
Format do pisania kolorem RGBA, jest bardziej nowoczesną alternatywą dla nieruchomości nieprzezroczystość. R (czerwony), G (zielony), B (niebieski) oznacza: czerwony, zielony, niebieski. ostatni list A- oznacza kanał alfa, który ustawia przezroczystość. RGBA w odróżnieniu Nieprzezroczystość nie wpływa na elementy potomne.
Teraz spójrzmy na nasz przykład z użyciem RGBA. Zamieńmy te linie na style.
Tło: ##027av4; /* Kolor tła */
nieprzezroczystość: 0,3 /* wartość przezroczystości tła */
do następnej linii
Tło: rgba(2, 127, 212, 0.3);
Jak widać, wartość przezroczystości 0,3 jest taka sama dla obu metod.
Drugi zrzut ekranu wygląda znacznie lepiej niż pierwszy.
Bawiąc się przezroczystością tła klocków, można uzyskać ciekawe efekty na stronie. Ważne jest, aby te półprzezroczyste bloki znajdowały się na kolorowym wzorze, takim jak fotografia. Tylko w tym przypadku efekt będzie zauważalny. Ta technika była używana w projektowaniu od dawna, nawet przed pojawieniem się jakiejkolwiek CSS3, został zaimplementowany wyłącznie w programach graficznych.
Jeśli klient wymaga, aby układ wyglądał dobrze w starszych wersjach przeglądarki Internet Explorera następnie dodaj właściwość filtr i nie zapomnij skomentować, aby nie ucierpiała ważność kodu.
Format RGBA całe wsparcie nowoczesne przeglądarki, z wyjątkiem Internet Explorera. To też jest bardzo ważne RGBA elastyczny, dotyczy tylko konkretnego dany element bez wpływu na dzieci. Oczywiste jest, że jest to wygodniejsze dla programisty. Mój wybór jest zdecydowanie na korzyść formatu RGBA za zdobycie przejrzystość w css.
Dla lepszego utrwalenia materiału i większej przejrzystości proponuję przejść dalej.
Vlad Merzhevich
Częściowa przezroczystość, jeśli jest używana prawidłowo, wygląda bardzo imponująco w projektowaniu stron internetowych. Najważniejsze jest to, że pod półprzezroczystymi blokami nie powinien znajdować się jednokolorowy wzór, ale obraz, w tym przypadku przezroczystość staje się zauważalna. Efekt ten zostaje osiągnięty różne sposoby a jeśli pamiętasz wszystko, w tym staromodne metody, to jest to użycie obrazu PNG jako tła, utworzenie obrazu w szachownicę i właściwości krycia. Ale gdy tylko konieczne staje się wykonanie półprzezroczystego tła w bloku, metody te mają nieprzyjemną wadę. zrobię mała recenzjażeby było jasne co w pytaniu, a także dla tych czytelników, którzy nie znają nietradycyjnych opcji tworzenia półprzezroczystego efektu.
W edytor graficzny wstępnie przygotowywany jest jednokolorowy półprzezroczysty rysunek, który jest zapisywany w formacie PNG-24 (ryc. 1). Cechą tego formatu jest obsługa 256 poziomów przezroczystości, czyli po prostu wyświetlanie półprzezroczystych obrazów.
Ryż. 1. Obraz, aby utworzyć tło
Następnie dodajemy obraz jako tło za pomocą właściwości tła, jak pokazano w przykładzie 1.
Przykład 1: Użycie półprzezroczystego wzoru
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Wynik ten przykład pokazany na ryc. 3.
Ryż. 2. Nakładanie tapety
Starsza przeglądarka Internet Explorer 6 nie działa z przezroczystością w PNG-24, jeśli z jakiegoś powodu potrzebujesz obsługi tej przeglądarki, będziesz musiał użyć do tego skryptów.
Przedstawiona metoda ma szereg ograniczeń. Tak więc po wyłączeniu obrazów w przeglądarce tło całkowicie zniknie. Ponadto zmiana koloru tła i wartości przezroczystości nie jest tak łatwa, w tym celu będziesz musiał ponownie edytować obraz.
Ta metoda należy do starożytnych sposobów implementacji przezierności, kiedy przeglądarki „nic nie mogły zrobić” i trzeba było szukać rozwiązań nieszablonowych. Sztuczka polega na stworzeniu obrazu, który składa się z przezroczystych i nieprzezroczystych pikseli (rysunek 3). Taka regularna struktura tworzy efekt przezierności, w zasadzie go imitując.
Ryż. 3. Powiększony wzór w kratkę
Oto jak to wygląda ostatecznie (ryc. 4).
Ryż. 4. Imitacja przezierności
Wady tej metody są porównywalne z poprzednią, może również wystąpić efekt mory oraz następuje degradacja tekstu.
Właściwość krycia CSS 3 ustawia wartość przezroczystości i waha się od 0 do 1, gdzie zero to pełna przezroczystość elementu, a jedynka to krycie. Właściwość opacity ma pewną cechę — przezroczystość jest rozdzielana na wszystkie elementy podrzędne i nie mogą one przekroczyć wartości przezroczystości ich elementu nadrzędnego. Okazuje się, że na półprzezroczystym tle nie może być tekstu nieprzezroczystego (przykład 2).
Przykład 2: Używanie krycia
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Wynik przykładu pokazano na ryc. 5.
Ryż. 5. Przezroczystość tekstu i tła
W przeglądarce Internet Explorer do wersji 8.0 włącznie krycie nie działa, dlatego używana jest do tego właściwość filtru specyficzna dla przeglądarki. Oczywiście skutkuje to nieprawidłowym kodem CSS.
Nowoczesne podejście jest znacznie prostsze i bardziej wizualne niż powyższe metody i polega na użyciu formatu RGBA dla koloru i tła. Pierwsze trzy litery są znane wielu i oznaczają czerwony, zielony, niebieski (czerwony, zielony, niebieski), ostatnia symbolizuje kanał alfa i określa przezroczystość elementu. Format zapisu jest taki.
kolor tła: rgba(r, g, b, a);
W nawiasach zamiast liter podana jest wartość składowej koloru, można ją obejrzeć w dowolnym edytorze graficznym, ostatnia wartość ustawia przezroczystość i odpowiada wartości właściwości opacity.
Nie wszystkie przeglądarki obsługują ten format: Internet Explorer od wersji 9, Opera od wersji 10, Firefox od wersji 3, Safari od wersji 3.2. Ale ogólnie nowoczesne przeglądarki wyświetlają przezroczystość poprawnie. W przypadku starszych wersji IE można osobno określić kolor w jego zwykłym formacie, przy czym oczywiście nie będzie przezroczystości. Lub ponownie użyj właściwości filter, ale wtedy musisz pogodzić się z faktem, że przezroczystość wpłynie również na tekst (przykład 3). Aby wymusić prawidłowy kod CSS, użyłem komentarzy warunkowych.
Przykład 3: Używanie RGBA
HTML5 CSS3 IE Cr Op Sa Fx
Wynik przykładu można zobaczyć na rys. 6.
Ryż. 6. Półprzezroczyste tło z nieprzezroczystym tekstem
Porównaj obrazek z poprzednim, litery stały się jaśniejsze i wyraźniejsze.
W przeglądarka internetowa Explorer 7 znalazł błąd podczas łączenia koloru tła z różnymi wartościami. Na przykład, jeśli ustawisz kolor tła na czerwony, jak pokazano poniżej, tło w IE7 w ogóle nie będzie wyświetlane.
Div ( kolor tła: czerwony; /* Nie dotyczy IE7 */ kolor tła: rgba(255, 0, 0, 0.5); )
Można to rozwiązać, zastępując właściwość background-color właściwością background .
Div ( background: red; /* I to działa */ background: rgba(255, 0, 0, 0.5); ) Jest jednak jedno zastrzeżenie. Walidator CSS „przeklina” w tle, gdy otrzyma wartość RGBA. Ale jednocześnie poprawnie stosuje się do background-color . Ogólnie rzecz biorąc, jak zawsze, musisz wybierać między przeglądarkami a ważnością.
efekt przezroczystości element jest wyraźnie widoczny na obrazie tła i stał się powszechny w różnych system operacyjny ponieważ wygląda stylowo i pięknie. Najważniejsze, aby pod półprzezroczystymi blokami nie był monochromatyczny wzór, ale obraz, w tym przypadku przezroczystość staje się zauważalna.
Efekt ten uzyskuje się na różne sposoby, w tym staromodnymi technikami, takimi jak użycie obrazu PNG jako tła, utworzenie obrazu w szachownicę i użycie właściwości krycia. Ale gdy tylko konieczne staje się wykonanie półprzezroczystego tła w bloku, metody te mają nieprzyjemne wady.
Weź pod uwagę przezroczystość tekstu i tła - jak prawidłowo wykorzystać ją w projektowaniu stron internetowych:
Główną cechą tej właściwości jest to, że wartość przezroczystości wpływa na wszystkie elementy podrzędne w środku, a nie tylko na tło. Oznacza to, że zarówno tło, jak i tekst staną się przezroczyste. Poziom przezroczystości można zwiększyć, zmieniając polecenie krycia z 0,1 na 1.
HTML 5 CSS 3 IE 9
W projektowaniu stron internetowych stosowana jest również częściowa przezroczystość, którą uzyskuje się dzięki formatowi kolorów RGBA, który jest ustawiony tylko dla tła elementu.
Zazwyczaj w projekcie tylko tło elementu powinno być przezroczyste, a tekst powinien być nieprzezroczysty, aby był czytelny. Właściwość opacity nie pasuje tutaj, ponieważ tekst wewnątrz elementu również będzie częściowo przezroczysty. Najlepiej używać formatu RGBA, którego częścią jest kanał alfa, czyli wartość przezroczystości. Wartość jest zapisywana rgba, następnie wartości składowych koloru czerwonego, niebieskiego i zielonego są wymienione w nawiasach oddzielonych przecinkami. Ostatnia jest przezroczystość, która jest ustawiana od 0 do 1, gdzie 0 oznacza pełną przezroczystość, a 1 nieprzezroczystość, czyli składnię stosowania rgba.
Półprzezroczyste tło HTML 5 CSS 3 IE 9
Przejrzystość CSSa- rozwiązanie dla różnych przeglądarek - 3,8 na 5 na podstawie 6 głosów
W tym samouczku przyjrzymy się przezroczystości CSS, nauczymy się, jak uczynić różne elementy strony przezroczystymi i osiągnąć pełną cross-browser, czyli ten sam efekt tego efektu w różnych przeglądarkach.
W CSS3 do tworzenia przezroczyste elementy odpowiada właściwości opacity, którą można zastosować do dowolnego elementu. Ta właściwość ma wartości od 0 do 1, które określają stopień przezroczystości. Gdzie 0 jest w pełni przezroczyste (wartość domyślna dla wszystkich elementów), a 1 jest w pełni nieprzezroczyste. Wartości są zapisywane jako ułamki: 0,1, 0,2, 0,3 itd.
Przykład użycia:
Nie wszystkie przeglądarki postrzegają i implementują powyższą właściwość krycia w ten sam sposób. W niektórych przypadkach konieczne jest użycie innej nazwy właściwości lub filtrów.
Właściwość krycia CSS3 obsługuje następujące typy przeglądarek Mozilli 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Tak dobrze :) Przeglądarka taka jak Internet Explorer do wersji 9.0 nie obsługuje własności krycia i aby stworzyć przezroczystość dla tej przeglądarki należy użyć właściwości filter i wartości alpha(Opacity=X) gdzie X jest liczbą całkowitą z przedziału od 0 do 100 co określa poziom przejrzystości. 0 to pełna przezroczystość, a 100 to pełne krycie.
Dotyczący Przeglądarka Firefox przed wersją 3.5 obsługuje właściwość -moz-opacity zamiast krycia.
Przeglądarki, takie jak Safari 1.1 i Konqueror 3.1, oparte na silniku KHTML, używają właściwości -khtml-opacity do kontrolowania przezroczystości.
Jak ustawić przezroczystość w CSS, aby wyglądał tak samo we wszystkich przeglądarkach? Aby stworzyć rozwiązanie dla różnych przeglądarek dla przezroczystości elementów, muszą zarejestrować nie tylko jedną właściwość krycia, ale następujący zestaw właściwości:
filtr: alpha(Krycie=50); /* Przezroczystość dla IE */ -moz-opacity: 0.5; /* Wsparcie dla Mozilli 3.5 i starszych */ -khtml-opacity: 0.5; /* Wsparcie dla Konquerora 3.1 i Safari 1.1 */ krycie: 0,5; /* Wsparcie dla wszystkich innych przeglądarek */
Spójrzmy na kilka przykładów ustawiania przezroczystości dla niektórych elementów, które są najczęściej używane na stronie.
Przezroczystość obrazu CSS.
Rozważ kilka opcji tworzenia półprzezroczystego obrazu. W poniższym przykładzie pierwszy obraz nie ma przezroczystości, drugi ma przezroczystość 50%, a trzeci ma 30%.
Wynik:
Przezroczystość w CSS po najechaniu kursorem na obraz.
Często konieczne jest uczynienie obrazka lub innego elementu przezroczystym w momencie najechania na niego kursorem. Można to zrobić za pomocą pseudoklasy :hover CSS. W tym celu nasz obrazek musi zarejestrować dwie klasy, jedną zwykłą - będzie to stan nieaktywny obrazka oraz drugą klasę z pseudoklasą: hover, tutaj należy określić przezroczystość obrazka w momencie najechanie kursorem.
Możesz zobaczyć wynik w wersji demonstracyjnej.
Przezroczystość tła CSS
W tym miejscu należy pamiętać, że przezroczystość dotyczy wszystkich elementów zagnieżdżonych i nie mogą one mieć większej przezroczystości niż element zagnieżdżony.
Jako przykład podajmy wariant z tłem strony utworzonym za pomocą obrazu oraz blok z tłem utworzonym za pomocą koloru i mający przezroczystość 50%.
Przykład kodu:
Oto wynik powyższego kodu:
