CSS3 opacityとrgbaの違い
投稿者：yasu 更新日時：2009年10月9日 11時05分54秒カテゴリ：CSS
CSS3では透明度の指定ができるようになるということなので、ちょっと試してみた。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3 opacityとrgbaの違い</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-color: #00ffff;"> <div style="float: left; width: 200px; border: solid; margin-right: 5px;"> <p style="background-color: #ffffff; opacity: 1">opacity 1</p> <p style="background-color: #ffffff; opacity: 0.9">opacity 0.9</p> <p style="background-color: #ffffff; opacity: 0.8">opacity 0.8</p> <p style="background-color: #ffffff; opacity: 0.7">opacity 0.7</p> <p style="background-color: #ffffff; opacity: 0.6">opacity 0.6</p> <p style="background-color: #ffffff; opacity: 0.5">opacity 0.5</p> <p style="background-color: #ffffff; opacity: 0.4">opacity 0.4</p> <p style="background-color: #ffffff; opacity: 0.3">opacity 0.3</p> <p style="background-color: #ffffff; opacity: 0.2">opacity 0.2</p> <p style="background-color: #ffffff; opacity: 0.1">opacity 0.1</p> <p style="background-color: #ffffff; opacity: 0">opacity 0</p> </div> <div style="float: left; width: 200px; border: solid; margin-left: 5px;"> <p style="background-color: rgba(255,255,255,1)">rgba 1</p> <p style="background-color: rgba(255,255,255,0.9)">rgba 0.9</p> <p style="background-color: rgba(255,255,255,0.8)">rgba 0.8</p> <p style="background-color: rgba(255,255,255,0.7)">rgba 0.7</p> <p style="background-color: rgba(255,255,255,0.6)">rgba 0.6</p> <p style="background-color: rgba(255,255,255,0.5)">rgba 0.5</p> <p style="background-color: rgba(255,255,255,0.4)">rgba 0.4</p> <p style="background-color: rgba(255,255,255,0.3)">rgba 0.3</p> <p style="background-color: rgba(255,255,255,0.2)">rgba 0.2</p> <p style="background-color: rgba(255,255,255,0.1)">rgba 0.1</p> <p style="background-color: rgba(255,255,255,0)">rgba 0</p> </div> </body> </html>
opacityは文字と背景の両方が透明になっていくのに対して、rgbaは背景のみ透明になっていきます。
Firefox3.5
Safari4
Opera10
ちなみにIEはこの定義を解釈できないのでこんな表示。
IE8
IE6
