Transparenz

Eine CSS-Eigenschaft, mit der sich unter anderem in Bezug auf Farben interessante Effekte erzeugen lassen, ist opacity. Als Wert kann hier eine Zahl zwischen 0 und 1 angegeben werden, wobei 0 für komplette Durchsichtigkeit und 1 keine Transparenz steht. Hier muss man darauf achten, dass Zahlen zwischen 0 und 1 mit einem Dezimalpunkt dargestellt werden, nicht mit einem Komma.

Wir können für das HTML-Dokument aus den letzten Abschnitten eine CSS-Datei mit dem folgenden Code erstellen:

body {
	background-color: lightcyan;
}
h1 {
	background-color: green;
}
h1:hover {
	opacity: 0.3;
}
h2 {
	color: blue;
}

Zur Erinnerung: die Pseudoklasse :hover bezieht sich auf Elemente, über denen sich der Mauszeiger befindet.

Aufgaben

1. Teste verschiedene Werte für opacity in Kombination mit verschiedenen Hintergrund- und Textfarben.
2. Vergleiche den Hintergrund eines transparenten Elements (z.B. opacity: 0.3), wenn du die Hintergrundfarbe des -Elements änderst. Wie verhält es sich demgegenüber, wenn du opacity: 1 einstellst?