ぼくはまちちゃん!(Hatena)

  • ライブドアリーダーで読む → Subscribe with livedoor Reader
  • Googleリーダーで読む → Add to Google
ぼくはまちちゃん!のRSSフィード

2012/05/06

CSSで半透明、opacityとrgbaの違い

こんにちはこんにちは!!
今日はちょっとCSSのメモです! 半透明について!

opacityを使った透過

#testOpacity {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */
	filter: alpha(opacity=40); /* IE */
	-moz-opacity:0.4; /* Firefox(old) */
	-khtml-opacity: 0.4; /* Safari(old) */
	opacity: 0.4;
}
Opacity test!

opacityは子要素まで全て透過する。


RGBaを使った透過

#testRgba {
	background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
}
RGBa test!

background-color:rgbaは、要素の背景色のみ透過する。
(→IEの人はこっちのページだとうまく表示できるかも?)

はい!あたりまえかもですね…。
でもぼく最近まで、この rgba って指定方法を知らなくて、ちょっと苦労したので…!