Transparent Boxes 2

Result with opacity:

10% opacity

30% opacity

60% opacity

opacity 1

Result with rgba():

10% opacity

30% opacity

60% opacity

default

Notice how the text gets transparent as well as the background color when using the opacity property.

The internal stylesheet used on this page

<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>

The inline styles used on this page

<div style="opacity:0.1;">
<div style="opacity:0.3;">
<div style="opacity:0.6;">