端くれプログラマの備忘録 CSS [CSS] 基本メモ: アルファ値の指定

[CSS] 基本メモ: アルファ値の指定

RGBの色成分に加えてアルファ値が指定できる。

サンプル

<style>
div {
    width: 100px;
    height: 20px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid red;
}
</style>
<style>
#test1 { color: rgba(255,0,0,1.0); }
</style>
<div id="test1">test1</div>

alpha-1

<style>
#test2 { color: rgba(255,0,0,0.6); }
</style>
<div id="test2">test2</div>

alpha-2

<style>
#test3 { color: rgba(255,0,0,0.2); }
</style>
<div id="test3">test3</div>

alpha-3

参考サイト

rgba()-CSS3リファレンス
http://www.htmq.com/css3/rgba.shtml