[CSS]背景が透けるカラムを実装するスタイルシート

Post on:2008年3月5日

HTML箇所

<textarea name="code" class="html" cols="60" rows="5">
null<div id="column-1" class="container">
	<div class="overlay"></div>
	<div class="content">
	<h2>Content</h2>
	</div>
</div>
</textarea>

null<div id="column-1" class="container">

<h2>Content</h2>

</div>

</textarea>

CSS箇所

<textarea name="code" class="css" cols="60" rows="5">
#column-1{
	position:relative;
	float:left;
	width:500px; /* remember to set a width */
}

.overlay{
	position:absolute;
	top:0; /* These positions makes sure that the overlay */
	bottom:0;  /* will cover the entire parent */
	left:0;
	width:100%;
	background:#000;
	opacity:0.65;
	-moz-opacity:0.65; /* older Gecko-based browsers */
	filter:alpha(opacity=65); /* For IE6&7 */
}

#column-1 .content{
	width:460px;
	padding:20px;
}

.content{
	position:relative;
}
</textarea>

#column-1{

position:relative;

float:left;

width:500px; /* remember to set a width */

}

.overlay{

position:absolute;

top:0; /* These positions makes sure that the overlay */

bottom:0; /* will cover the entire parent */

left:0;

width:100%;

background:#000;

opacity:0.65;

-moz-opacity:0.65; /* older Gecko-based browsers */

filter:alpha(opacity=65); /* For IE6&7 */

}

#column-1 .content{

width:460px;

padding:20px;

}

.content{

position:relative;

}

</textarea>

IE6用
「expression」を使用してため、スクリプトのオフ時は適用されません。

<textarea name="code" class="css" cols="60" rows="5">
/* Lets use the * html hack so only IE6 reads the rule */
* html #column-1 .overlay{
	height:expression(document.getElementById("column-1").offsetHeight);
}
</textarea>