javascriptなしで背景が透けるカラムを実装するスタイルシート

ネタ元:背景が透けるカラムを実装するスタイルシート

このやり方も素敵なんですが、JavaScriptなしで余計なdiv要素を追加せずに再現できる方法を紹介します。

サンプル

特に難しいことはしていないですが、カラムの背景を透過pngで指定しています。
透過pngに対応していないIEに関してはfilterで代用しています。

参考:IEとそれ以外のブラウザでアルファ画像を使う方法

#main,#navi{
	background:url(alpha.png);
}
* html #main{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}
* html #navi{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}

alphafilter.jsを利用するとCSSの記述もすごく簡単になります。

サンプル

ネタ元はopacityプロパティで再現している為、透過pngを作成する手間は省けるものの、opacityプロパティは内包する要素すべての透過度を変更するので背景を表現する要素と内容を表現する要素を別々に記述しないと、いけないくなります。

背景用の要素でサイズを確保する為に、positionを使用しており

包含する要素を作成して

position:relative; 

と指定し、背景用の要素に

position:absolute;  
top:0;
bottom:0;
left:0; 

と指定してサイズを確保しています。(この発想はすごいですね)

関連エントリー

CSSでロールオーバーもどき
CSSで実現するスマートなロールオーバー
BIR-もうひとつの画像置換
tableの膨張を防ぐ【css tips】
画面の下部にフッターを表示する

スポンサードリンク

«XML宣言について | メイン | 企画と営業»