背景色の透過

2013/05/28

背景の透過はブラウザ種類によって書き方が様々。

opacity

opacityで透過してしまうと対象タグ内の要素まで透過してしまうので、背景だけ透過するのは現実的でない気がします。

背景に透過画像

background で背景を透過画像にするのがブラウザ依存が少ないのがメリットだけど、デザインがfixしない場合は非効率であるのと、コンテンツが重くなりがちです。

rgba()

今のところrgba()を使うのがいいような気がしますが、IE8以前では利用できないので、IEでは filter で代用してやります。

ということで、現状自分なりにメンテしやすいのが以下の書き方かと。 jQueryでも指定できますし。

[css] background-color: #f1d46f; filter:progid:DXImageTransform.Microsoft.Alpha(Style=2,Opacity=90,FinishOpacity=90); background-color: rgba(241, 212, 111, 0.7); [/css]