WordPressのテーマ作成（7）　CSS3にチャレンジ rgba()

Tweet

rgba()

色の指定に透明度が加わった物がrgba()です。

background-color:rgba(100,100,100,0.5);

1個目が赤色の指定
2個目が緑色の指定
3個目が青色の指定
4個目が透明度（alpha）の指定

透明度は0が透明で1が不透明です。
alphaは0.3や0.5というように0から1の間で指定します。

いくつか使用例を書いていきます。
（google chromeで見てください。）

<div style="width:200px;height:200px;background-image:url(http://yasutaro.info/blog/wp-content/uploads/20120121.jpg);padding:3px">
<div style="width:150px;height:150px;box-shadow:20px 20px 10px rgba(0,0,0,0.5);background-color:#fff">rgba(0,0,0,0.7)の場合</div>
</div>

box-shadowの影にalphaで透明度を指定しました。
影が半透明になってちゃんと壁紙が見えています。

それに比べ、透明度を指定していない方はあくまでも指定した色で塗りつぶされます。

ただし、box-shadowなどでぼかしの設定している場合、ぼかしの部分は背景が透けたように見えます。

<div style="width:200px;height:200px;background-image:url(http://yasutaro.info/blog/wp-content/uploads/20120121.jpg);padding:3px">
<div style="width:150px;height:150px;box-shadow:20px 20px 10px rgba(0,0,0,0.5);background-color:#fff;background-color:rgba(255,255,255,0.7);">半透明に半透明の影</div>
</div>

半透明に半透明の影なんかもできます。

古いブラウザは半透明に対応していないので、

background-color:rgba(255,255,255,0.7);

のように指定をしていた場合、

background-color:rgba(255,255,255,0.7);background-color:#fff;

というようにalphaが対応してない時に出力される色を
一緒に指定しておいた方がいいみたいです。

rgbaはまぁまぁ使い道がありそうな気がします。

にほんブログ村 パソコン・周辺機器

Tweet