【テーマ：　背景に透過PNGを使ってデザインの幅を広げる】

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

【テーマ：　背景に透過PNGを使ってデザインの幅を広げる】

【使用するモノ：　Photoshop css javascript】

それでは早速やってみます。

＞

（１）headerにてalphafilter.jsを読み込みます。

（２）該当のdivに、class=”alphafilter”を付与します。

（３）つぎにcssにて、該当のIDにスタイルシートを指定します。

#base_cont {
width:890px;
margin: 0 auto;
padding: 0 10px;
text-align: left;
background: url(../images/common/parts/bg-wra.png) repeat-y left top;
}
その後、IE6用に指定。
* html #base_cont { /* for ie6 */
width:890px;
margin: 0 auto;
padding: 0 10px;
text-align: left;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=”../images/common/parts/bg-wra.png”, sizingMethod=”image”);
}

以上、「背景に透過PNGを使ってデザインの幅を広げる」でした。

が、ほかのjavascriptで動かなくなるものが発生する時があるので、使用するときはよほど必要な時のみにしたほうがいいと思われます。