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

Bits & Pixelsのエントリー「Cross-browser transparent columns」から、背景が透けるカラムを実装するスタイルシートを紹介します。

Cross-browser transparent columns
デモページ

対応ブラウザは、IE6, 7, Fx2, Op9, Safari3となっています。

HTML箇所

null
<div id="column-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Content</h2>
</div>
</div>

CSS箇所

#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;
}

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

/* Lets use the * html hack so only IE6 reads the rule */
* html #column-1 .overlay{
	height:expression(document.getElementById("column-1").offsetHeight);
}

Post on:2008年3月5日