tro-suke blog

不透明度 opacity とカラー指定 rgba

CSS3で新しく加わったプロパティの中に透過があります。以前は透明効果を使う場合は、透過のpng画像を使ったりしていました。

div {opacity:0.8;}

不透明度 opacity とカラー指定 rgba

CSS3では上記のように記述すればdiv要素を80%に透過してくれます。とても便利ですね。

tro-sukeのブログでもopacityを使用していますが、指定が簡単な反面、ちょっと困ったことが発生する場合もあります。というのは、 opacityが指定された要素は、すべてが透明になってしまうということです。文字や写真までもが透明になってしまうのは、ちょっと困りますよね。そう いった場合は、カラー指定を rgba で指定すると回避できます。

rgba(Rの数値, Gの数値, Bの数値, アルファ値)

div {background-color: rgba(255, 255, 255, 0.8);}

例えば上記のように指定すれば、div要素の背景カラーを白色で80%に透過してくれます。この場合は、背景のカラーのみが透過されますので、文字や写真は透明にならずに済みます。

ただ私の場合RGBの数値がどうもピンときませんが、それも慣れれば大丈夫な気がします。