CSS ondoorzichtigheid/transparantie
- Vorige pagina CSS Pseudo-element
- Volgende pagina CSS Navigatiemenu
doorschijnendheid de eigenschap specificeert de ondoorzichtigheid/transparantie van het element.
doorzichtig beeld
doorschijnendheid de waarde van de eigenschap ligt tussen 0.0-1.0. Hoe lager de waarde, hoe doorschijnender het wordt:
opacity 0.2
opacity 0.5
doorschijnendheid 1
Voorbeeld
img {
doorschijnendheid: 0.5;
}
doorzichtig muisover-effect
doorschijnendheid de eigenschap wordt meestal gebruikt met :hover koppeling met selectors, zodat de ondoorzichtigheid kan worden gewijzigd bij het muisover-effect:
Voorbeeld
img {
doorschijnendheid: 0.5;
}
img:hover {
opacity: 1.0;
}
Voorbeeldverklaring
De eerste CSS-blok lijkt op de code in voorbeeld 1. Bovendien, we hebben ook een effect toegevoegd wanneer de gebruiker de muis over een van de afbeeldingen houdt. In dit geval, wanneer de gebruiker de muis over de afbeelding houdt, willen we dat de afbeelding niet doorschijnend is. Deze CSS is doorschijnendheid:1;.
Wanneer de muispijl van het beeld afgaat, wordt het beeld opnieuw doorschijnend.
Voorbeeld van een omgekeerde hover-effect:
Voorbeeld
img:hover {
doorschijnendheid: 0.5;
}
Doorzichtig vak
Gebruik doorschijnendheid Wanneer je de doorschijnendheid van een element instelt voor de achtergrond, erfst alle subelementen dezelfde doorschijnendheid. Dit kan het lezen van tekst in volledig doorschijnende elementen moeilijk maken:
Voorbeeld
div {
doorschijnendheid: 0.3;
}
Doorschijnendheid met RGBA gebruiken
Als je de doorschijnendheid van subelementen niet wilt toepassen, zoals in het bovenstaande voorbeeld, gebruik dan RGBA-kleurenwaarden. In het volgende voorbeeld wordt de achtergrondkleur ingesteld in plaats van de doorschijnendheid van de tekst:
Je hebt al geleerd van onze CSS Kleur In dit hoofdstuk hebben we geleerd dat je RGB kunt gebruiken als kleurenwaarde. Naast RGB kan ook een RGB-kleurenwaarde met een alpha-kanaal (RGBA) worden gebruikt - dit kanaal bepaalt de doorschijnendheid van de kleur.
RGBA-kleurenwaarden worden gespecificeerd als: rgba(rood, groen, blauw, alpha) alpha De parameter is een getal tussen 0.0 (volledig doorschijnend) en 1.0 (geen doorschijnendheid).
Tip:Je zult onze CSS Kleur In dit hoofdstuk leer je meer over RGBA-kleuren.
Voorbeeld
div {
achtergrond: rgba(76, 175, 80, 0.3) /* Doorzichtigheid van 30% groene achtergrond */
}
Tekst in het doorzichtig vakje
Dit is enkele tekst die zich bevindt in een doorzichtig vakje.
Voorbeeld
<html>
<head>
<style>
div.background {
achtergrond: url(klematis.jpg) herhalen;
rand: 2px vast zwart;
}
div.transbox {
marge: 30px;
achtergrondkleur: #ffffff;
rand: 1px vast zwart;
doorzichtigheid: 0.6;
}
div.transbox p {
marge: 5%;
vet: bold;
kleur: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p> Dit is wat tekst dat zich in een transparante box bevindt.</p>
</div>
</div>
</body>
</html>
Voorbeeldverklaring
Eerst maken we een <div>-element aan met een achtergrondafbeelding en rand (class="background").
Vervolgens maken we een andere <div> (class="transbox") aan in de eerste <div>.
<div class="transbox"> heeft een achtergrondkleur en rand - deze div is transparant.
In een transparante <div>, hebben we wat tekst toegevoegd in het <p>-element.
- Vorige pagina CSS Pseudo-element
- Volgende pagina CSS Navigatiemenu
