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ご指摘あればをお願いします。

(件名or本文内でキーワード検索できます)



  • << 前のページ
  • 次のページ >>
ページトップへ