ネットショップ立ち上げ備忘録

初心者がネットショップを立ち上げるまでに関連する技術や考察の備忘録です。ネットショップでのSEO対策や、アクセス・集客方法、広告手法、デザインなどについても記事を公開しています。

PREV | PAGE-SELECT | NEXT



≫ EDIT

スポンサーサイト



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


関連スクラップ記事

関連エントリ抽出中...
このエントリーをはてなブックマークに追加 Clip to Evernote

| スポンサー広告 | --:-- | TOP↑

≫ EDIT

ie6で透過png画像を使う為のCSS



ie6-png-css

Windows7のベータが登場しいよいよIEも8なのですが、まだまだXPユーザも多くie6のユーザも多い状況です。
ie6は何かとコーディングする時に大変なのですが、特に透過効果を使用したい時にie6はpngが透過されません。
gif画像で解決できる場合はそれにこした事はないのですが、どうしてもgifの解像度では透明が汚くなる事が多々あります。そんな時はpngを使うと解消されます。

今回は背景画像に焦点を。
例えばアメブロではhtml側の編集が出来ず、cssのみの編集しか出来ません。html側も編集できる場合はie用のjavascriptを入れこめれるのですがcssしか編集出来ない場合はjavascriptでの制御は出来ません。

ではcssのみでie6でも透過pngが使えるようにするコードです。
詳しい参考リンクはCSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にするにのっています。

div.sample{
background:url(img/bg.png) no-repeat;
}

* html div.sample{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

該当するpng背景画像を指定してください。
注意点はAlphaImageLoader を使った要素の position プロパティ が relative, または absolute に指定されている場合、その子孫要素の a 要素や onclick, onmouseover などが絶対に効かなくなってしまいます。

実際に適用してみていただくとわかるのですが、何もクリックできなくなります。
(Firefoxでは問題ないですが、ieでは何もクリックできないです)

回避策として子要素にrelative, または absoluteを指定してあげると回避できます。
ですので、子要素として新たにdivを指定して作ってあげる必要があります。

つまりpng背景画像を親としてそこから子にプロパティをあててあげるといった手順ですね。


関連スクラップ記事

関連エントリ抽出中...
このエントリーをはてなブックマークに追加 Clip to Evernote

| コーディング | 12:01 | TOP↑

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。