Opis
Określa poziom przezroczystości elementu strony internetowej. Gdy element jest częściowo lub całkowicie przezroczysty, prześwituje obraz tła lub inne elementy znajdujące się pod półprzezroczystym obiektem.
Składnia
nieprzezroczystość: wartość
Wartości
Wartość jest liczbą z zakresu. Wartość 0 odpowiada pełnej przezroczystości elementu, natomiast 1 odpowiada jego przezroczystości. Liczby ułamkowe postaci 0,6 wyznaczają przezroczystość. Dopuszczalne jest pisanie liczb bez zera wiodącego, np. przezroczystość: .6.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Wynik ten przykład pokazany na ryc. 1.
Ryż. 1. Wynik zastosowania krycia
Przeglądarki
Firefox przed wersją 3.5 obsługuje niestandardową właściwość -moz-opacity.
Internet Explorera do wersji 9.0 używa filtrów do zmiany przezroczystości, dla tej przeglądarki należy napisać filter : alpha(opacity=50) , gdzie parametr opacity może przyjmować wartość od 0 do 100.
Właściwość CSS opacity odpowiada za przezroczystość elementów (obrazków, tekstu, bloków) w HTML.
Składnia nieprzezroczystości CSS
nieprzezroczystość: wartość;
Gdzie wartość może przyjmować wartości rzeczywiste z zakresu od 0,0 do 1,0. Wartość 1,0 oznacza brak przezroczystości (domyślnie).
Przykłady: jak przezroczystość w HTML
Przykład nr 1. Przezroczysty obraz w formacie HTML
Pierwszy obraz jest wyświetlany bez przezroczystości, drugi z przezroczystością 0,5
Пример №2. Эффекты с прозрачностью в html
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в html
Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
На странице преобразуется в следующее
Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
object.style.opacity ="VALUE "
Для создания эффекта прозрачности в CSS используется свойство opacity .
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство - filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:
Próbować "Przezroczystość po najechaniu myszką
Pseudoklasa:hover pozwala na zmianę wygląd elementy po najechaniu na nie kursorem myszy. Użyjemy tej funkcji, aby obraz stracił przezroczystość po najechaniu myszką:
Próbować "Przezroczystość tła
Istnieją dwa możliwe sposoby uczyń element przezroczystym: opisana powyżej właściwość opacity i określenie koloru tła w formacie RGBA.
Być może znasz już model reprezentacji kolorów RGB. RGB (Red, Green, Blue – czerwony, zielony, niebieski) to system kolorów, który określa odcień poprzez zmieszanie koloru czerwonego, zielonego i niebieskiego. Na przykład, aby ustawić kolor tekstu na żółty, możesz użyć dowolnej z następujących deklaracji:
Kolor: rgb(255,255,0); kolor: rgb(100%,100%,0);
Kolory określone za pomocą RGB będą się różnić od wartości szesnastkowych, których używaliśmy wcześniej, tym, że pozwalają na użycie kanału przezroczystości alfa. Oznacza to, że przez tło elementu z przezroczystością alfa będzie widoczne to, co się pod nim znajduje.
Ogłoszenie Kolory RGBA podobna w składni do standardowych reguł RGB. Będziemy jednak musieli także zadeklarować wartość jako RGBA (zamiast RGB) i określić dodatkową dziesiętną wartość przezroczystości po wartości koloru z zakresu od 0,0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty).
Kolor: rgba(255,255,0,0,5); kolor: rgba(100%,100%,0,0,5);
Różnica między właściwością opacity a właściwością RGBA polega na tym, że właściwość opacity stosuje przezroczystość do całego elementu, co oznacza, że cała zawartość elementu staje się przezroczysta. RGBA umożliwia ustawienie przezroczystości poszczególnych części elementu (na przykład samego tekstu lub tła):
Treść (obraz tła: url(img.jpg); ) .prim1 ( szerokość: 400px; margines: 30px 50px; kolor tła: #ffffff; obramowanie: 1px jednolity czarny; waga czcionki: pogrubiona; krycie: 0,5; filtr : alfa(opacity=70); /*dla IE8 i wcześniejszych*/ text-align: center; ) .prim2 ( szerokość: 400px; margines: 30px 50px; kolor tła: rgba(255,255,255,0,5); obramowanie: 1px solid czarny; grubość czcionki: pogrubiona; wyrównanie tekstu: do środka; ) Spróbuj »
Uwaga: wartości RGBA nie są obsługiwane w IE8 i nowszych wersjach wcześniejsze wersje. Aby zadeklarować kolor zastępczy dla starszych przeglądarek, które nie obsługują wartości kolorów alfa, należy określić go najpierw przed wartością RGBA: tło: rgb(255,255,0); tło: rgba(255,255,0,0,5);
Przejrzystość w CSS jest ostatnio dość modną techniką, która powoduje trudności we wdrażaniu 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ż przezroczystość istnieje już od kilku lat, nigdy nie była częścią standardu CSS. Jest to niestandardowa właściwość, która powinna być częścią specyfikacji CSS3.
Stare podejście
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.
Następna linia wykorzystuje właściwość -moz-opacity, która działała w bardzo wczesnych wersjach silnika Mozilli. Firefox przestał go wspierać w wersji 0.9.
Przezroczystość CSS w Firefoksie, Safari, Chrome i Operze
W przypadku większości nowoczesnych przeglądarek wystarczy skorzystać z następującej właściwoś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.
Przezroczystość CSS dla przeglądarki Internet Explorer
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.
Ustawianie i zmiana przejrzystości CSS za pomocą JavaScript lub jQuery
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 dużo ł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. ));
Funkcja RGBA
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.
Funkcja HSLA
Podobnie jak poprzednia funkcja, CSS3 umożliwia również ustawienie półprzezroczystego koloru za pomocą funkcji HSLA, której parametrami są Barwa, Nasycenie, Jasność i Kanał 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.
Właściwość CSS opacity odpowiada za przezroczystość elementów (obrazków, tekstu, bloków) w HTML.
Składnia nieprzezroczystości CSS
Gdzie wartość może przyjmować wartości rzeczywiste z zakresu od 0,0 do 1,0. Wartość 1,0 oznacza brak przezroczystości (domyślnie).
Przykład nr 1. Przezroczysty obraz w formacie HTML
Pierwszy obraz jest wyświetlany bez przezroczystości, drugi z przezroczystością 0,5
Przezroczystość elementu
Spraw, aby obraz był przezroczysty po najechaniu kursorem!
Źródła pobierania wersji demonstracyjnejDziękuję za uwagę!
Następny artykuł
Jak utworzyć blok div z przewijaniem?
