Jak dodać przezroczystość w CSS za pomocą właściwości kryzysowej?

Przejrzystość można dodać do elementów, takich jak obrazy i kontenery Div, aby zwiększyć ogólny wygląd strony internetowej. W celu uczynienia elementu przezroczystego, stosuje się właściwość CSS krycia. Ta właściwość może renderować wartości od 0.0 do 1.0. W tym artykule poprowadzimy Cię, jak dodać przejrzystość do elementów. Ten post obejmuje następujące tematy.

1. Jak dodać przejrzystość do elementu
2. Dodanie efektu najemnika wraz z przezroczystością
3. Jak dodać przejrzystość do elementu
4. Dodanie przezroczystości do RGBA

Zacznijmy.

Jak dodać przejrzystość do elementu

Możesz zrobić dowolny element (e.G. obraz), który pojawia się w Twojej witrynie przezroczyste, przypisując określoną wartość do właściwości krycia CSS elementu.

Przykład

Aby zrozumieć koncepcję przejrzystości, postępuj zgodnie z poniższym przykładem.

Html

Tutaj dodaliśmy obraz i ustawiliśmy jego szerokość na 200px i wysokość na 250px.

CSS

img
Krycie: 0.6;

Krycie obrazu zostało ustawione na 0.6.

Wyjście

Obraz jest 60% nieprzezroczysty.

Notatka: Krycie i przezroczystość są przeciwne do siebie. Dlatego niskie wartości właściwości krycia uczynią element bardziej przezroczysty i odwrotnie.

Na przykład, jeśli zmniejszymy krycie i ustawym na 0.2 Tak.

img
Krycie: 0.2;

Przejrzystość wzrośnie.

Obraz jest 20% nieprzezroczysty.

Dodanie efektu najemnika wraz z przezroczystością

Możesz dodać efekt najemnika wraz z przypisaniem pewności do obrazu. Dodanie tego efektu zmieni przezroczystość obrazu, gdy użytkownik przyniesie mysz na określony obraz.

Przykład

Poniższy przykład pokazuje, jak użyć efektu najemnika z właściwością krycia.

Html

W powyższym kodzie dodajemy obraz i nadajemy mu trochę szerokości i wysokości.

CSS

img
Krycie: 0.4;

IMG: Hover
Krycie: 1.0;

W powyższym kodzie CSS najpierw przypisujemy krycie 0.4, aby obraz był przezroczysty, a następnie dodajemy efekt najemnika do obrazu z krycie 1. Oznacza to, że gdy użytkownik przyniesie mysz na obraz, nie będzie on przezroczysty, a odwrotnie nastąpi, gdy kursor myszy zostanie odniesiony od obrazu.

Wyjście

Efekt nachylenia jest pomyślnie dodawany do obrazu wraz z przezroczystością.

Jak dodać przejrzystość do elementu i jego dzieci

Korzystając z właściwości krycia, gdy dodasz przejrzystość do elementu, dzieci tego konkretnego elementu dziedziczą również przejrzystość.

Przykład

Tutaj zademonstrujemy, jak dodać przejrzystość do elementu.

Html

Mam krycie 0.6

Mam nieprzezroczystość 1

Tutaj stworzyliśmy dwa elementy, aby wyjaśnić, jak działa przejrzystość dla elementów HTML.

CSS

div.krycie
Krycie: 0.4;

div
kolor tła: różowy;
Wyściółka: 15px;

Pierwszy element DIV ma przejrzystość 0.4, a drugi element jest całkowicie nie przemienny.

Wyjście

Im bardziej przezroczysty element, zawartość w tym elemencie będzie również przezroczysta.

Dodanie przezroczystości do RGBA

Kolory RGBA są używane w celu uniknięcia powyższej sytuacji, w której kiedy stosujesz krycie do elementu, zawartość wewnątrz elementu również staje się przejrzysta.

Przykład

Aby zapobiec wystąpieniu tekstu w elemencie w elemencie, użyj następującego kodu.

Html

Z nieruchomościami

Z kolorem RGBA

W powyższym kodzie tworzymy dwa elementy. Pierwszą Divowi przypisano krycie 0.2 Aby zademonstrować różnicę między użyciem właściwości krycia a użyciem właściwości krycia wraz z kolorami RGBA.

CSS

div.RGB
Tło: RGB (255 192,203);
Wyściółka: 15px;
Krycie: 0.2;

div.RGBA
Tło: RGBA (255 192,203, 0.2);

Pierwszym Divowi przypisano różowy kolor tła, wyściółka 15px i krycie 0.2. Podczas gdy drugiej divowi przypisano ten sam kolor tła wraz z krycie 0.2 jako czwarty argument w metodzie RGBA.

Wyjście

Tekst wewnątrz elementu nie jest przezroczysty podczas używania przezroczystości w kolorach RGBA.

Wniosek

Możesz dodać przejrzystość do różnych elementów HTML, takich jak kontenery Div lub obrazy za pomocą właściwości krycia. Ta właściwość renderuje wartości od 0.0 do 1.0, ponadto, im niższa wartość tej właściwości, tym więcej przezroczystość. Wraz z przezroczystością możesz również dodać efekt zawisowywania na elementy, użyj kolorów RGBA, aby zapobiec przejściu zawartości elementu, gdy dodasz do niej przejrzystość. Ten post prowadzi, jak dodać przejrzystość w CSS za pomocą właściwości krycia wraz z odpowiednimi przykładami.