opacity:0、display:none、visibility:hidden、rgba(0,0,0,0)
opacity:1;は完全表示、opacity:0;は完全非表示だがスペースは残る。display:none;はスペースが残らず消える。visibility:hiddenもスペースは残る。
opacityはIE7以下には未対応なので、filterセレクタを使用する。
/*css*/ /* CSS内 */ #z1 { opacity:0.4; /*IE8以上他*/ filter:alpha(opacity=40); /*IE7以下*/ }
opacity:1.0
/*css*/ #n1 img { opacity:1; } #m1 { width:100px; height:100px; border:solid 2px #000; background:#f00; color:#fff; margin:10px 20px; }
1.0
opacity:1.0、display:none;
/*css*/ img { opacity:1; display:none; }
1.0
opacity:1.0、visibility:hidden;
/*css*/ img { opacity:1; visibility:hidden; }
1.0
opacity:0.7
/*css*/ img { opacity:0.7; }
0.7
opacity:0.4
/*css*/ img { opacity:0.4; }
0.4
opacity:0
/*css*/ img { opacity:0; }
0
rgba(r,g,b,a)
CSSプロパティとして新たに加わったアルファチャンネル。
opacity同様に1が不透明、0が完全透明の意味。画像にはopacity、文字とか背景色にはrgbaという時代になるのかな。
/*css*/ #n2 { width:300px; height:300px; background:rgba(255,0,0,0.5); }
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>