テキストはそのままで、背景色だけ半透明に！（rbga)

opacityのおさらいから

opacityってーのは、要素の不透明度を指定する記述だってことだい、べらんめぃ！（江戸っ子）
でもこれじゃ、テキストまで薄くなってしまいます。

どうやったらテキストは半透明にならないの？

テキストまで薄くなっては見づらいじゃないか！そんなあなたのために背景色だけを半透明にするrgbaカラーモデルで指定する方法をご紹介だ！こんちくしょうめ！（江戸っ子）

a {
	border-radius:10px;
	padding:10px 15px;
	display:block;
	width:250px;
	text-align:center;
	color:#000;
	background-color:rgba(192,237,232,1.0);
}
a:hover {
	background-color:rgba(192,237,232,0.5);
}

ボタンだよ

cssの背景色をしている【background-color:rgba(192,237,232,0.5);】のこの0.5って言うところが不透明度を指しているらしいでぃ！
※ちなみにIE８以下は使えません。すみません。

他にもこんなデザインとかでも使えるよ

テキストを読みやすくするために、うっすら背景色を入れたい。

こんな風にopacityとは違った使い方もできるので、用途に応じて使い分けてみましょう。

おまけ

こんな使い方も・・・？