Ako želimo nekom elementu dodati prozirnost, onda to dobijemo na sljedeći način:
background-color: rgba(000, 000, 000, 0.x);
RGB oznaci boja je dodano slovo A koje se naziva ALFA kanal i određuje prozirnost. Umjesto x upisujemo broj koji određuje koliko će ta boja biti prozirna.
U donjem primjeru mijenjamo prozirnost plave boje – rgb(000, 000, 255). Prvi kvadrat je najtamniji i ima vrijednost alfa kanala 1, a zadnji je najsvijetliji i ima vrijednost 0.2
HTML:
<html>
<head>
<title> </title>
<link href=”style.css” media=”all” type=”text/css” rel=”stylesheet”/>
</head>
<body>
<p><div id=”okvir1″></div><p>
<p><div id=”okvir2″></div><p>
<p><div id=”okvir3″></div><p>
<p><div id=”okvir4″></div><p>
<p><div id=”okvir5″></div><p>
</body>
</html>
CSS:
body {
background-image: url(podloga.jpg);
}
#okvir1, #okvir2, #okvir3, #okvir4, #okvir5 {
width: 300px;
height: 100px;
}
#okvir1 {
background-color: rgba(000, 000, 255, 1);
}
#okvir2 {
background-color: rgba(000, 000, 255, 0.8);
}
#okvir3 {
background-color: rgba(000, 000, 255, 0.6);
}
#okvir4 {
background-color: rgba(000, 000, 255, 0.4);
}
#okvir5 {
background-color: rgba(000, 000, 255, 0.2);
}