Nieprzezroczystość w CSS to właściwość określająca kontrolę przezroczystości elementów takich jak treść Lub obrazy . Korzystając z tej właściwości, możemy ustawić dowolne obrazy tak, aby były całkowicie nieprzezroczyste ( widoczny ), w pełni przezroczysty ( ukryty ) lub półprzezroczysty (częściowo widoczny). Przyjmuje wartość liczbową z zakresu od 0 do 1. Gdzie 0 oznacza w pełni przezroczysty, a 1 oznacza całkowicie widoczny. Wartości krycia od 0 do 1, np. 0,2, 0,4, 0,6 itd., zmieniają obraz z przezroczystego na nieprzezroczysty poprzez stopniowe zwiększanie wartości dziesiętnej.
Składnia
opacity :
Aby obraz był półprzezroczysty, wartość liczbowa musi mieścić się w przedziale od 0 do 1. Jeśli podamy 1, obraz będzie nieprzezroczysty, jeśli wartość liczbowa wynosi 0, obraz stanie się całkowicie przezroczysty.
Przykład 1 : W tym przykładzie użyjemy właściwości opacity, aby uczynić element przezroczystym po najechaniu myszką na element.
Główny.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. Wyjście
Najedź kursorem na czerwone pole, aby wyświetlić efekt przezroczystości lub krycia.
Nieprzezroczystość przejścia w CSS
W CSS A nieprzezroczystość przejścia to właściwość służąca do płynnej zmiany stanu krycia z jednego poziomu na inny. Oznacza to, że krycie przejścia zmienia stan elementu nieprzezroczystego na przezroczysty z określonym czasem trwania. Przejście ma cztery właściwości: właściwość przejścia, czas trwania przejścia, funkcja synchronizacji przejścia i opóźnienie przejścia, używane do uzyskania efektu krycia na obrazie. The czas przejścia jest ważną właściwością w przypadku zmian stopniowych lub nagłych, które odzwierciedlają efekt nieprzezroczystości elementu w określonym czasie w milisekundach lub sekundach.
Skrócona właściwość przejścia wygląda następująco:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Składnia definiująca nieprzezroczystość przejścia w CSS
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Własność przejściowa
Poniżej znajdują się właściwości przejścia używane do kontrolowania efektów przejścia.
| Wartość | Opis |
|---|---|
| Przejście-własność | Służy do zdefiniowania nazwy właściwości CSS, która pokazuje efekt przejścia do obrazów. |
| Przejście – czas trwania | Służy do definiowania okresu czasu w sekundach lub milisekundach, po którym ma być wyświetlany efekt przejścia. |
| Funkcja synchronizacji przejścia | Służy do definiowania krzywej prędkości na obrazie w celu pokazania efektu przejścia. |
| Przejście - opóźnienie | Określa, czy efekt przejścia jest inicjowany w elemencie lub obrazie. |
Uwaga: Ustawiając właściwość przejścia dla obrazu lub zawartości, musimy zdefiniować właściwość czasu trwania przejścia; w przeciwnym razie czas trwania wynosi 0 i nie będzie widać żadnego efektu.
Potrzeba krycia przejścia w CSS
The nieprzezroczystość to prosta właściwość CSS używana do kontrolowania przezroczystości obrazu poprzez ustawienie zakresu krycia od 0 do 1. Odzwierciedla statyczną lub nagłą zmianę elementu, aby pokazać efekt krycia. Na przykład, jeśli chcemy wyświetlić obraz jako przezroczysty, musimy ustawić wartość krycia od 0 do 1. Następnie efekt krycia zostanie wyświetlony natychmiast, zamiast zająć trochę czasu. Dlatego używamy A nieprzezroczystość przejścia w CSS, który kontroluje przezroczystość elementu w określonym przedziale czasu. Korzystając z funkcji czasu przejścia w nieprzezroczystości przejścia, możemy określić krzywą prędkości elementu, która określa efekt szybkiego krycia obrazu. W ten sposób używamy efektu krycia przejścia, aby odzwierciedlić zmiany w określonym przedziale czasu, zamiast pojawiać się natychmiast.
Przykład 2: W tym przykładzie użyjemy właściwości krycia przejścia, która odzwierciedla efekt krycia w określonym czasie, a nie natychmiast.
Plik1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> Wyjście
