CSS3のrgba()でつくった半透明色を重ねて遊ぶという暇なことをしていたら気づきました。 こんな感じでコードを書くじゃないですか?



Chromeで開くじゃないですか?
半透明の円を重ねてみる
普通ですよね。赤い円の色は R:254,G:178,B:178 です。 Firefoxで開くじゃないですか?
alpha-fx1
普通ですよね。赤い円の色は R:254,G:178,B:178 です。 IE10で開くじゃないですか?
alpha-ie1
普通ですよね。赤い円の色は R:254,G:179,B:179 です。他2つと比べると1違いますが。 まぁどのブラウザもほぼ一緒。それじゃあコレが色が変わらなくなるまで重ねてみます。
こんな感じ。
重ねてみる
divタグを20回くらい繰り返したら色が変わらなくなったので色を見てみます。 IE10で開くじゃないですか?
IE
赤い円は R:255, G:0, B:0 赤くなった。 Firefoxで開くじゃないですか?
Firefox
赤い円は R:255, G:0, B:0 赤くなった。
Chrome
赤い円は R:254, G:0, B:0 赤く・・・ほぼ赤い。

なぜに?

なんで完全に赤にならないのか?重ねる前の色の情報を見てみると・・・
Chromeの半透明色は・・・
明度が99%になってる。他のブラウザはもちろん100%。 試しに rgba(255, 0, 0, 0.99) に変えても明度は99%のまま、しかも何故か彩度も99%。そしていくら重ねても100%にならない(‘A`) rgba(255, 0, 0, 0.999) だと明度100%、彩度100%に。 なんで99%になるのかわからないまま(小数点の計算の影響?)、表示される色の違いは気にしなくていいレベルですが。 ちなみにWindows環境で起こりましたよ(´∀`)Macとかスマフォはシラネェ 追伸:「天才は1%のひらめきと99%の汗」から1%の部分がなくなるとなんか釈然としないので、やっぱり1%は大事だと思います。ハイ。