[CSS]透過PNGと透過フィルターの使い方

要素を透過させる場合、アルファチャンネルPNGかCSSのフィルターどちらか使えば作ることが出来る。
アルファチャンネルPNGはPNG24とかの保存形式で、背景無し（またはマスクつき）の画像を保存すれば作成出来る。
Div等の背景を透過させる場合、アルファチャンネルPNGで80%くらいに透過させた画像を背景にすると、フィルターと変わらない効果を得られる。

透過フィルターを使った場合、中の要素まで透過してしまうという問題がある。
positionとか色々CSSを駆使すれば回避できないこともないが、アルファチャンネルPNGを使えば中の要素が透けることはない。

以下サンプル
iframe対応のブラウザでご覧ください
解説は続きに。

<div id="container">
<div id="contents">
<p class="sample1">sample1 position:absolute(out)</p>
<div id="trans">
<p class="sample2">sample2 position:relative(in)</p>
<p class="sample3">sample3 no-position</p>
<div class="sample4"><p>sample4 position:relative(relative+absolute)</p></div>
</div>
<p><strong>Case1:CSS transparency filter</strong></p>
<div id="trans2">
<p>Case2:Alpha channel PNG</p>
<p>IEは対応してないので、AlphaImageLoaderを使用します</p></div>
</div>
</div>

#trans {
	background-color:#000000;
	filter:alpha(opacity=43);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	padding:0;
	height:100px;
	border-top: 3px solid #ccc;
	border-bottom: 3px solid #ccc;
}
p.sample1 {
	position: absolute;
	color:#fff;
	top:4.5em;
}
p.sample2 {
	position: relative;
	color:#fff;
	margin-top:2em;
}
p.sample3 {
	color:#fff;
	margin-top:0.3em;
}
div.sample4{
	position:relative;
	margin-top:0.3em;
}
div.sample4 p {
	position:absolute;
}
#container{
	background: url(CW033_L.jpg) no-repeat left top;
	background-attachment: fixed;
}
#contents {height:100%;min-height:100%;}

#trans2 {
	border-top: 3px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin-top: 1em;
	height:1%;
}
head + /* */ body #trans2 {
	background:url(alpha-channnel.png) repeat left top;
}
#trans2 {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha-channnel.png', sizingMethod='scale');
}

使ってる画像（右クリック保存できます）→背景・透過PNG

CSSのプロパティの場合

CSSの透過指定は次の通り。

filter:alpha(opacity=43);　IE用
-moz-opacity:0.5;　Mozilla用
-khtml-opacity: 0.5;　Safari用
opacity: 0.5;　Opera、Safari用

khtmlはあってもなくても良い。（参考に入れただけ）
現状は各ブラウザで使うプロパティが違うものの、CSS3.0ではopacityで統一されるとか。
おそらく次期バージョンのブラウザで実装されはじめるはず。

透過フィルターを使っているDIVに入っている文字は上から

Sample1：外に出した要素をpositionで中に入ってるぽく見せる
Sample2：中に入ってる要素にposition:relativeする
Sample3：何もしない
Sample4：relativeした中にabsolute入れる

IEの場合、中に入ってる要素にposition:relativeするだけで文字や画像等の要素が透過するのを回避できる。
（他のブラウザは回避できない。）
ただIEでこの方法を取っていると、スクロールが出ないバグが発生するので注意が必要。
また、透過フィルターを使用している要素にposition(relative等)を指定すると、中の要素にposition指定されてても透過してしまう。

アルファチャンネルPNGの場合

FireFoxやSafari等、IE以外のブラウザはアルファチャンネルPNGに対応しているので、
CSSの透過プロパティが統一されていない現状では、アルファチャンネルPNGを背景にする方が楽だったりする。

ついでにアルファチャンネルPNG背景の作り方を紹介。

Photoshop

１．適当なサイズで新規作成

２．透過させたい色で塗りつぶす（カンバスカラー指定した場合は飛ばす）

３．透明度変更

４．Web用に保存＞PNG-24

下のFireworks同様マスクでも作れる。

Fireworks

１．背景色透明で新規作成

２．新規ビットマップイメージを作成して塗りつぶす

３．作ったビットマップイメージにマスク追加

４．適度な濃度でマスクを塗りつぶす

５．PNG24か32で保存

透明度変更だけでは作れません。（値段の差…？）

AlphaImageLoader

InternetExplorerの場合、アルファチャンネルPNGに標準対応してないので、独自拡張フィルターのAlphaImageLoaderを使って表示します。
書式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(Enabled, sizingMethod,src);

Enabled(boolean) true|false
フィルタの使用可・不可を指定。初期値はtrue
sizingMethod(string)　crop | image | scale
画像を指定された範囲にどう表示するか指定。
- crop・・・画像を指定された範囲に左上から等寸大に表示。画像が領域を超える範囲は表示されない。
- image・・・画像を指定された範囲に左上から等寸大に表示。画像が領域を超える場合は表示エリアを画像サイズに合わせて拡大
- scale・・・画像を指定された範囲に拡大・縮小して表示。
src(string)
画像ファイルのパス。

AlphaImageLoaderは、使用する要素にheightでauto以外の数値を指定しないと表示されません。
また、フィルターなのでbackground-imageと併用するとbackgroundが優先されて透過されてないPNGが表示されます。
なので上のサンプルではハック（head + /* */ body）でbackgroundがIEに表示されないように指定してあります。
ハックは別の方法でもいいです。（サンプルのは使ってみたかっただけ）
高さを絶対指定したくない場合はheight:1%（ホーリーハック）などを使う。

ただし、このフィルタを背景に使用するとおかしなことになる場合があります。
（filterを使っている要素の親ブロック要素にposition:absoluteまたはposition:relativeを使用していると、リンクや:hoverが失われる等）
軽いものならCSS駆使して何とかなることもありますが、
どうしても解決できない場合は諦めてPngFix系ライブラリを使用した方が良いと思います。
（でもライブラリ使っても対応済みブラウザと完全に同じ表示にはならないことの方が多いです）

[CSS]透過PNGと透過フィルターの使い方

CSSのプロパティの場合

アルファチャンネルPNGの場合

Photoshop

Fireworks

AlphaImageLoader

関連

コメントを残すコメントをキャンセル

CSSのプロパティの場合

アルファチャンネルPNGの場合

Photoshop

Fireworks

AlphaImageLoader

シェア

関連

コメントを残すコメントをキャンセル