CSS Transparantie
De eigenschap opacity in CSS geeft de transparantie van een element aan.Transparante afbeelding
Je kunt transparante afbeeldingen maken met behulp van de eigenschap opacity. De eigenschap opacity kan een waarde van 0.0 - 1.0 nemen. Hoe lager de waarde, hoe transparanter dat het element wordt.
opacity 0.2
opacity 0.5
opacity 1
(standaard)
Opacity veranderen bij een mouse-over
De eigenschap opacity wordt vaak samen met de :hover selector gebruikt om de opacity te wijzigen bij een mouse-over.
Transparant vak
Door gebruik te maken van de eigenschap opacity op een element, zal dit niet alleen effect hebben op de achtergrond van het element maar ook alle child elementen van dat element zullen transparant worden. Dit betekent dat de tekst binnen een volledig transparant element moeilijk te lezen is.
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Transparantie met RGBA
Indien je geen opacity wilt toepassen op onderliggende elementen (child elementen), zoals in het bovenstaande voorbeeld dan kun je gebruik maken van de RGBA kleurwaarden. Het volgende voorbeeld stelt de opacity in voor de achtergrondkleur en niet de tekst.
100% opacity
60% opacity
30% opacity
10% opacity
background: rgba( rood, groen, blauw, alpha )Om de transparantie aan te passen van een element kan je een RGB kleurwaarde gebruiken met een alpha waarde (RGBA), deze geeft de opacity voor een kleur aan. Een RGBA kleurwaarde bestaat uit (rood, groen, blauw en alfa). De alfa parameter is een getal tussen 0.0, en 1.0.
Voorbeeld:
div {
background: rgba(255, 99, 71, 0.3) /* rode achtergrond met 30% opacity */
}
 |
De RGBA transparantie heeft geen invloed op de onderliggende elementen zoals de eigenschap opacity. De alfawaarde van RGBA heeft alleen invloed op de transparantheid van de kleur in plaats van het hele element. |
Tekst in een transparant vak
Dit tekst is in een transparant vak geplaatst.
Voorbeeld:
div.achtergrond {
width: 100%;
height: auto;
background: url(pattern.jpg) repeat;
border: 2px solid black;
}
div.transparant {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transparant p {
margin: 5%;
font-weight: bold;
color: #000000;
}
