Nieprzejrzystość/ przezroczystość CSS
- Poprzednia strona Pseudo-elementy CSS
- Następna strona Panel nawigacyjny CSS
opacity Atrybut określa nieprzejrzystość/ przezroczystość elementu.
przejrzysty obraz
opacity Wartości atrybutu opacity waha się w zakresie 0.0-1.0. Im niższa wartość, tym bardziej przezroczysty:
opacity 0.2
opacity 0.5
opacity 1
Przykład
img {
opacity: 0.5;
}
przejrzysty efekt najedzenia się
opacity Atrybuty te są zazwyczaj używane z :hover Kombinując z selektorami, możemy zmienić nieprzejrzystość podczas najedzenia się myszą:
Przykład
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Wyjaśnienie przykładu
Pierwszy blok CSS jest podobny do kodu w przykładzie 1. Dodatkowo, dodaliśmy efekt, który ma się pojawić, gdy użytkownik najedzie na jedną z obrazów. W tym przypadku, gdy użytkownik najedzie na obrazie, chcemy, aby obraz był nieprzejrzysty. Ten CSS jest opacity:1;.
Kiedy wskaźnik myszy opuszcza obraz, obraz znów staje się przezroczysty.
Przykład efektu odwrotnego nawigacji:
Przykład
img:hover {
opacity: 0.5;
}
przezroczystego okna
Użycie opacity Kiedy atrybut przeźroczystości jest dodawany do tła elementu, wszystkie elementy potomne dziedziczą tą samą przezroczystość. Może to sprawić, że tekst w całkowicie przezroczystych elementach będzie trudny do odczytania:
Przykład
div {
opacity: 0.3;
}
Użycie przeźroczystości RGBA
Jeśli nie chcesz zastosować przezroczystości dla elementów potomnych, jak w powyższym przykładzie, użyj wartości kolorów RGBA. Poniższy przykład ustawia kolor tła zamiast przezroczystości tekstu:
Już z naszej Kolory CSS W tym rozdziale nauczyłeś się, że można używać RGB jako wartości kolorów. Odrobina RGB, wartości kolorów RGB, można łączyć z kanałem alpha (RGBA) - który określa przezroczystość koloru.
Wartości kolorów RGBA określa się jako: rgba(czerwony, zielony, niebieski, alpha)。 alpha Parametry to liczby między 0.0 (zupełnie przezroczyste) a 1.0 (zupełnie nieprzejrzyste).
Wskazówka:Będziesz nas Kolory CSS W tym rozdziale dowiedziałeś się więcej o kolorach RGBA.
Przykład
div {
background: rgba(76, 175, 80, 0.3) /* Przeźroczystość 30% zielonego tła */
}
Tekst w przezroczystym oknie
Oto kilka tekstów znajdujących się w przezroczystym oknie.
Przykład
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>To jest tekst znajdujący się w przezroczystym oknie.</p>
</div>
</div>
</body>
</html>
Wyjaśnienie przykładu
Najpierw stworzyliśmy element <div> z tłem i ramką (class="background").
Następnie, w pierwszym <div>, stworzyliśmy kolejny <div> (class="transbox").
<div class="transbox"> ma kolor tła i ramkę - ten div jest przezroczysty.
W przejrzystym <div>, dodaliśmy tekst w elemencie <p>.
- Poprzednia strona Pseudo-elementy CSS
- Następna strona Panel nawigacyjny CSS
