要素に透明度を指定するには、CSS3の「opacityプロパティ」や「RGBaプロパティバリュー」を使用します。

opacityプロパティ

透明度を表します。
指定した要素の全体に対して有効で、子要素にも引き継がれます。
opacityプロパティを指定していないときのデフォルト値は「1」です。

以下のサンプルにcssを適用しています。

<!-- html -->
<div class="sample">
sample
</div>

/* css */
.sample {
width:300px;
padding:20px;
border: 10px solid #000;
color: #000;
}

opacity: 1;

.sample {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

opacity: 0.75;

.sample {
opacity: 0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
}

opacity: 0.5;

.sample {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}

opacity: 0.25;

.sample {
opacity: 0.25;
-moz-opacity: 0.25;
filter: alpha(opacity=25);
}

opacity: 0;

.sample {
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}

RGBaプロパティバリュー

「RGB」はRed/Green/Blueを、「a」はalpha（透明度）を表します。
指定したプロパティ以外には影響しないので、子要素に引き継がれることもありません。

以下のサンプルにcssを適用しています。

<!-- html -->
<div class="sample">
sample
</div>

/* css */
.sample {
width:300px;
padding:20px;
border: 1px solid #000;
color: #000;
}

RGBa(0,0,0,1)

.sample {
background-color: #000;
background: rgba(0,0,0,1);
}

RGBa(0,0,0,0.75)

.sample {
background-color: #000;
background: rgba(0,0,0,0.75);
}

RGBa(0,0,0,0.5)

.sample {
background-color: #000;
background: rgba(0,0,0,0.5);
}

RGBa(0,0,0,0.25)

.sample {
background-color: #000;
background: rgba(0,0,0,0.25);
}

RGBa(0,0,0,0)

.sample {
background-color: #000;
background: rgba(0,0,0,0);
}

おまけ

マウスオーバー時にcssを適用してロールオーバーを表現することもできます。

opacityプロパティ

sample

.sample:hover {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}

RGBaプロパティバリュー

sample

.sample:hover {
background-color: #000;
background: rgba(0,0,0,0.5);
}