Efekt półprzezroczysty element jest wyraźnie widoczny na obrazie tła i stał się powszechny w różnych systemy operacyjne ponieważ wygląda stylowo i pięknie. Najważniejsze to nie mieć prosty wzór, ale obraz, w tym przypadku przezroczystość staje się zauważalna.
Efekt ten został osiągnięty na różne sposoby, w tym staromodne techniki, takie jak używanie obrazu PNG jako tła, tworzenie obrazu w kratkę i właściwość krycia. Ale gdy tylko pojawi się potrzeba wykonania półprzezroczystego tła w bloku, metody te mają nieprzyjemne wady.
Przyjrzyjmy się przezroczystości tekstu i tła – jak prawidłowo ją wykorzystać w projektowaniu stron internetowych:
Główną cechą tej właściwości jest to, że wartość przezroczystości wpływa na wszystkie zawarte w niej elementy podrzędne, a nie tylko na tło. Oznacza to, że zarówno tło, jak i tekst staną się półprzezroczyste. Możesz zwiększyć poziom przezroczystości, zmieniając polecenie opacity z 0,1 na 1.
HTML 5 CSS 3 IE 9
W projektowaniu stron internetowych stosowana jest również częściowa przezroczystość, którą osiąga się poprzez format kolorów RGBA, który jest ustawiany tylko dla tła elementu.
Zazwyczaj w projekcie tylko tło elementu powinno być półprzezroczyste, a tekst powinien być nieprzezroczysty, aby zachować czytelność. Właściwość opacity nie jest tutaj odpowiednia, ponieważ tekst wewnątrz elementu również będzie częściowo przezroczysty. Najlepiej jest używać formatu RGBA, który zawiera kanał alfa, czyli innymi słowy, wartość przezroczystości. Wartość jest zapisywana rgba, następnie wartości składowych koloru czerwonego, niebieskiego i zielonego są podane w nawiasach, oddzielone przecinkami. Ostatnią z nich jest przezroczystość, ustawiana od 0 do 1, gdzie 0 oznacza pełną przezroczystość, a 1 kolor - nieprzezroczystość - składnia używania rgba.
Półprzezroczyste tło HTML 5 CSS 3 IE 9
Właściwość CSS 3 nieprzezroczystość pozwala uczynić jeden lub drugi element witryny przezroczystym.
Stopień przezroczystości elementu jest określony przez wartość z 0 Do 1 Gdzie 0 – całkowicie przezroczysty 1 – w ogóle nieprzejrzysty.. A więc na przykład znaczenie 0.5 właściwości nieprzezroczystość zastosowane do zdjęcia będzie to oznaczać ten obraz powinien być przezroczysty.
Przeglądarka Internet Explorera nie obsługuje właściwości nieprzezroczystość aż do wersji dziewiątej ma jednak swój własny filtr, za pomocą którego można ustawić stopień przezroczystości:
filtr: alfa(opacity=50)
Oznaczający nieprzezroczystość do filtra Przeglądarka internetowa Eksplorator może się różnić od 0 - całkowicie przezroczysty 100 - nieprzejrzysty
Bloki tego menu będą przezroczyste również po najechaniu myszką w IE!!
W zasadzie mógłby to być koniec rozdziału o przejrzystości, ale chciałbym też opowiedzieć o tzw prefiksy dostawców.. ci towarzysze nie mają żadnego szczególnego związku z tym rozdziałem, jednak w miarę postępów w nauce CSS3 będą pojawiać się coraz częściej i trzeba będzie gdzieś o nich porozmawiać - więc opowiem ci tutaj.
Zatem przedrostki dostawców to specjalne przedrostki właściwości CSS używane przez przeglądarki w przypadku właściwości eksperymentalnych, które nie są oficjalnie uwzględnione w specyfikacji CSS.
Pamiętamy, że specyfikacja CSS 3 jest wciąż w fazie rozwoju i formalnie właściwości opisane w tym tutorialu nie istnieją w naturze, ale przeglądarki już aktywnie z nich korzystają na własne ryzyko i ryzyko.
Dlaczego na własne ryzyko? Tak, ponieważ istnieje możliwość, że po oficjalnym zatwierdzeniu specyfikacji CSS 3 opisane w niej właściwości będą różnić się w swoim działaniu od właściwości o tej samej nazwie, z których korzystają już przeglądarki. No cóż, zaszalejmy i pozwólmy twórcom specyfikacji CSS 3 wyznaczyć właściwość nieprzezroczystość nie jako stopień przezroczystości bloku, ale np. jego zacienienie czy migotanie (oczywiście bzdury piszę), co potem pokażą miliony zainstalowanych przeglądarek dla którego nieprzezroczystość Czy to jest przejrzystość?
Albo powiedzmy, że twórcy przeglądarki wymyślili własną właściwość - innowację, której nikt inny nigdzie nie ma, ale dokument z taką właściwością nie przechodzi kontroli ważności, ponieważ takiej właściwości nie ma w specyfikacji.
Z tych i innych powodów przeglądarki poprzedzają właściwości, które nie są częścią oficjalnej specyfikacji. Każda przeglądarka ma swój własny przedrostek zaczynający się od znaku „-”, znak ten na początku właściwości, a także ten znak „_”, zgodnie ze specyfikacją CSS 2.1, oznacza, że właściwość jest zarezerwowana dla rozszerzeń CSS niektórych przeglądarki.
Oto najpopularniejsze przeglądarki i ich przedrostki:
| Przeglądarka | Prefiks |
|---|---|
| Opera | -o- |
| Firefox, SeaMonkey, Camino | -moz- |
| Internet Explorer 8 i nowsze wersje | -SM- |
| Safari do wersji 3, Konqueror | -khtml- |
| Safari 3 i nowsze, Google Chrome | -webkit- |
Użycie prefiksów jest bardzo proste; wystarczy wziąć dowolną właściwość CSS i zastąpić ją żądanym przedrostkiem, na przykład właściwością nieprzezroczystość zastąpić -moz- okazuje się: -moz-nieprzezroczystość
Chociaż w rzeczywistości moje wyrażenie „ użyj przedrostków"zło! w rzeczywistości nic nie jest nigdzie zastępowane, istnieje po prostu właściwość nieprzezroczystość, ale jest -moz-nieprzezroczystość i są to dwie różne właściwości, które niekoniecznie muszą spełniać tę samą funkcję! - to należy zrozumieć..
Powinieneś także zrozumieć, że niektóre określone przeglądarki są w stanie to zrobić pewne wersje może wspierać Właściwości CSS tylko z własnymi przedrostkami (znowu wyrażam się błędnie, poprawnie jest powiedzieć, że mają własne właściwości - rozszerzenia CSS przeglądarki), lub mogą początkowo polegać nawet na opracowywanych specyfikacjach. – Każdy konkretny przypadek rozważymy w tym podręczniku osobno.
Jeśli chodzi o ten rozdział dotyczący przejrzystości, należy zauważyć, że Firefox 3.5 i jego wcześniejsze wersje korzystają z własnej właściwości -moz-nieprzezroczystość, A Przeglądarka Safari do wersji 1.1 korzysta z własnej właściwości -khtml-nieprzezroczystość .
Aby więc nasz przykład był w pełni kompatybilny z różnymi przeglądarkami, musimy dodać kilka dodatkowych linii do kodu:
Jak widać prefiksy znacznie rozciągają kod i ich użycie nie zawsze jest uzasadnione, jeśli wersje przeglądarek, które chcą pracować z określonymi właściwościami tylko przy użyciu swoich przedrostków, są dość stare, jak ma to miejsce w przypadku właściwości nieprzezroczystość, to nie musisz ich wskazywać.. – choć oczywiście jest to zła rada..
Cóż, teraz kilka przydatnych wskazówek...
Zawsze używaj prefiksów (chyba, że dana przeglądarka nie może się bez nich obejść) w przypadkach, gdy używana właściwość może znacząco wpłynąć na wydajność, czytelność i użyteczność witryny. Co innego, gdy nie działają drobne elementy w projekcie witryny, a co innego, gdy np. nie działa menu witryny lub nie można odczytać tekstu na stronie, ponieważ przeglądarka nie obsługuje jakiejś właściwości i zamiast tego używa podobnego, własnego.
W tej lekcji przyjrzymy się takim CSS właściwoś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ść cyfrowa dla nieprzezroczystość ustawiany w zakresie od 0,0 do 1,0, gdzie zero oznacza całkowitą przezroczystość, a jedynka oznacza absolutne nieprzezroczystość. Na przykład, aby zobaczyć przezroczystość 50%, musisz ustawić wartość na 0,5. Trzeba o tym pamiętać nieprzezroczystość propaguje do wszystkich elementów potomnych rodzica. Oznacza to, że tekst na przezroczystym tle również będzie przezroczysty. I to 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.
Dziew(
tło: url(images/yourimage.jpg); /* Obraz tła */
szerokość: 750px;
wysokość: 100px;
margines: automatyczny;
}
.niebieski(
tło: #027av4; /* Półprzezroczysty kolor tła */
nieprzezroczystość: 0,3; /* Wartość przezroczystości tła */
wysokość: 70px;
}
h1 (
dopełnienie: 6px;
rodzina czcionek: Arial Black;
waga czcionki: pogrubiona;
rozmiar czcionki: 50px;
}
Format zapisu koloru 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 inaczej Nieprzezroczystość nie wpływa na elementy podrzędne.
Teraz spójrzmy na nasz przykład użycia RGBA. Zamieńmy te linie w stylach.
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 wynosząca 0,3 jest taka sama dla obu metod.
Drugi zrzut ekranu wygląda znacznie lepiej niż pierwszy.
Bawiąc się przezroczystością tła bloków, możesz uzyskać ciekawe efekty na swojej stronie internetowej. 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. Technika ta była od dawna stosowana w projektowaniu, jeszcze przed pojawieniem się jakiejkolwiek CSS3, został on zaimplementowany wyłącznie w programach graficznych.
Jeśli Klient wymaga, aby układ dobrze wyglądał w starszych wersjach przeglądarki Internet Explorera, a następnie dodaj właściwość filtr i nie zapomnij o komentarzu, aby nie miało to wpływu na ważność kodu.
Format RGBA obsługują wszystkie nowoczesne przeglądarki z wyjątkiem Internet Explorera. To też jest bardzo ważne RGBA elastyczny, działa tylko na konkretny dany element bez wpływu na jej spółki zależne. Oczywiste jest, że jest to wygodniejsze dla projektanta układu. Mój wybór jest zdecydowanie na korzyść formatu RGBA otrzymać przejrzystość w CSS.
Dla lepszego utrwalenia materiału i większej przejrzystości sugeruję przejście przez niego.
Przezroczystość CSS - rozwiązanie między przeglądarkami - 3,8 na 5 przy 6 głosach
W tym samouczku przyjrzymy się przezroczystości CSS i nauczymy się dodawać różne elementy przezroczystość strony i osiągnięcie pełnej kompatybilności między przeglądarkami, czyli efekt ten działa tak samo w różnych przeglądarkach.
W CSS3 do stworzenia przezroczyste elementy odpowiada właściwości przezroczystości, którą można zastosować do dowolnych elementów. Ta właściwość ma wartości od 0 do 1, które określają stopień przezroczystości. Gdzie 0 to pełna przezroczystość (wartość domyślna dla wszystkich elementów), a 1 to pełne krycie. 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.
Poniższe widoki obsługują właściwość krycia CSS3 Przeglądarki Mozilli 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Całkiem nieźle :) przeglądarka taka jak Internet Explorer do wersji 9.0 nie obsługuje właściwości opacity i aby stworzyć przezroczystość dla tej przeglądarki, należy użyć właściwości filter i wartości alpha(Opacity=X), w której X jest liczbą całkowitą w zakres od 0 do 100, który określa poziom przezroczystości. 0 jest całkowicie przezroczyste, a 100 jest całkowicie nieprzezroczyste.
W sprawie Przeglądarka Firefox przed wersją 3.5 obsługiwała właściwość -moz-opacity zamiast opacity.
Przeglądarki takie jak Safari 1.1 i Konqueror 3.1, zbudowane na silniku KHTML, używają właściwości -khtml-opacity do kontrolowania przezroczystości.
Jak ustawić przezroczystość w CSS, aby wyglądała tak samo we wszystkich przeglądarkach? Aby stworzyć wieloprzeglądowe rozwiązanie zapewniające przezroczystość elementów, należy określić nie tylko jedną właściwość krycia, ale następujący zestaw właściwości:
filtr: alfa(Krycie=50); /* Przezroczystość dla IE */ -moz-opacity: 0,5; /* Obsługuje Mozillę 3.5 i starsze */ -khtml-opacity: 0.5; /* Obsługuje Konqueror 3.1 i Safari 1.1 */ krycie: 0,5; /* Obsługuje wszystkie inne przeglądarki */
Przyjrzyjmy się kilku przykładom ustawienia przezroczystości niektórych elementów, które są najczęściej używane na stronie.
Przezroczystość obrazu CSS.
Rozważmy kilka opcji tworzenia przezroczyste obrazy. W poniższym przykładzie pierwszy obraz nie ma przezroczystości, drugi ma przezroczystość 50%, a trzeci ma przezroczystość 30%.
Wynik:
Przezroczystość w CSS po najechaniu myszką na obraz.
Często jest to konieczne przejrzysty obraz lub dowolny inny element w momencie najechania na niego kursorem. Można to zrobić za pomocą Pomoc CSS pseudoklasa:hover. W tym celu naszemu obrazkowi należy przypisać dwie klasy, jedną zwykłą - będzie to stan nieaktywny obrazka oraz drugą klasę z pseudoklasą: hover, tutaj należy określić przezroczystość obrazka w danym momencie najechania kursorem.
Wynik można zobaczyć w wersji demonstracyjnej.
Przezroczystość tła przy użyciu 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 podamy wariant z tłem strony utworzonym za pomocą obrazka oraz blok z tłem utworzonym za pomocą koloru i posiadający przezroczystość 50%.
Przykładowy kod:
Oto wynik kodu opublikowanego powyżej:
Przejrzystość w CSS jest dość modną techniką ostatnio, co powoduje trudności w implementacji w różnych przeglądarkach. Nadal nie istnieje metoda uniwersalna, co zapewniłoby przejrzystość dla wszystkich przeglądarek. Jednak ostatnio sytuacja wyraźnie się poprawiła.
W tym artykule szczegółowo omówiono istniejące podejścia, a także przykłady kodu i wyjaśnienia, które pomogą Ci osiągnąć ten sam wynik we wszystkich przeglądarkach przy minimalnym wysiłku.
Warto wspomnieć, że chociaż przejrzystość istnieje już od kilku lat, nigdy nie była jej częścią Standard CSS. Jest to niestandardowa właściwość, która powinna być częścią specyfikacji CSS3.
w starym Wersje Firefoksa a Safari musi zastosować właściwość w następujący sposób:
#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )
Właściwość -khtml-opacity była używana w starszych wersjach przeglądarek webkit. Ta właściwość została uznana za przestarzałą i nie jest już potrzebna, chyba że masz pewność, że znaczna część ruchu w Twojej witrynie pochodzi od użytkowników korzystających z przeglądarki Safari 1.x, co jest oczywiście mało prawdopodobne.
W następnym wierszu użyto właściwości -moz-opacity, która działała bardzo dobrze wcześniejsze wersje Silnik Mozilli. Firefox przestał go wspierać w wersji 0.9.
Dla większości nowoczesne przeglądarki wystarczy skorzystać z następującej własności:
#myElement ( krycie: .7; )
W powyższym przykładzie element jest ustawiony na 70% krycia (30% przezroczystości). Oznacza to, że jeśli ustawimy wartość na jeden, element będzie nieprzezroczysty, a zatem ustawienie tej wartości na zero sprawi, że będzie niewidoczny.
Właściwość opacity przetwarza 2 cyfry dziesiętne. Oznacza to, że wartość „.01” będzie się różnić od wartości „.02”, chociaż nie jest to zauważalne.
Jak zwykle, Internet Explorer nie jest przyjazny dla innych przeglądarek. Ponadto mamy obecnie trzy wersje tej przeglądarki, które są w dość powszechnym użyciu, a ustawienie przezroczystości w każdej z nich jest inne i czasami wymaga dodatkowego wysiłku, aby uzyskać pozytywny wynik.
#myElement ( filtr: alfa(opacity=40); )
W tym przykładzie użyto właściwości filter, która działa w wersjach 6-8, jednak w wersjach 6 i 7 istnieje jedno ograniczenie: właściwość hasLayout elementu musi być ustawiona na true . Ta właściwość występuje tylko w IE i więcej na jej temat można przeczytać np. na Habré.
Innym sposobem ustawienia przezroczystości za pomocą CSS w IE8 jest zastosowanie następującego podejścia (zwróć uwagę na komentarze):
#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* działa w IE6, IE7 i IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * tylko dla IE8 */ )
Pierwsza linia będzie działać we wszystkich aktualnie używanych wersjach, druga - tylko w IE8. Zwróć uwagę, że w drugim wierszu zastosowano przedrostek -ms-, a wartość podano w cudzysłowie.
Aby ustawić przezroczystość, możesz użyć następującego kodu:
Document.getElementById("myElement").style.opacity = ".4"; // dla większości przeglądarek document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // dla IE
Oczywiście w tym przypadku znacznie łatwiej jest skorzystać z jQuery, dodatkowo będzie działać we wszystkich przeglądarkach:
$("#myElement").css(( krycie: .4 )); // działa we wszystkich przeglądarkach
Możesz animować tę właściwość:
$("#myElement").animate(( opacity: .4 ), 1000,function() ( // Animacja została ukończona; ten kod działa we wszystkich przeglądarkach. ));
CSS3 planuje obsługę kanałów alfa przy użyciu funkcji RGB. Ta funkcja działa w przeglądarce Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Używa się go w ten sposób:
#rgba ( tło: rgba(98, 135, 167, .4); )
W tym przypadku ostatni parametr wskazuje poziom krycia.
Podobnie jak poprzednia funkcja, CSS3 umożliwia również ustawienie półprzezroczystego koloru za pomocą funkcji HSLA, której parametrami są Hue, Saturation, Lightness i Alpha.
#hsla ( tło: hsla(207, 38%, 47%, .4); )
Ważnym punktem podczas korzystania z funkcji rgba i hsla jest to, że ustawienie przezroczystości nie jest stosowane do elementów potomnych, natomiast użycie właściwości opacity jest dziedziczone.
