このページの記事目次 (タグ: 半透明 の検索結果 1 件)
スタイルシートで 文字部分に「背景色」や「背景画像」を入れることはありますよね。 今回は、半透明 を表現できる アルファチャンネル付きPNG (αPNG,半透明PNG) を背景画像に使う方法,及び 配布サイト, 自分で作る方法 などを紹介します。

クリックで画像を拡大します [ 実際のWebページはこちら ]
アルファチャンネル付きPNG は、IE7以上 のブラウザ (Firefox,Opera,Google Chrome,Safari などを含む) では、完全にサポートされています。 IE6 では、サポートされていない形式なので、そのままでは 透過率を指定する前の 「元の画像の状態」 で表示されることになります。
- 文字色だけでどうにかしようとすると難しいケースもありますよね。。。
アルファチャンネル付きPNG を 文字背景に 【 ありのごとくあつまりて 】 単純な設定の場合 : 50%の単色画像使用(透過率50%)
単純な設定の場合 : 75%の単色画像使用(透過率25%)
IE6 では元の画像の状態で表示されます。- 画像は単色でなくてもOKです。 50%の画像使用
- IE6用 に半透明に見せかけた透過GIFや透過PNGを使う方法も
IE6 にも対応するように設定することも可能らしいのですが... ここでは上手くできませんでした。。。 (IE6、今は IETester で確認しているだけなので、詳細は不明です。)
[ 参考 : CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする , CSS を使って IE 6 で PNG の半透明を有効にする | ヨモツネット ]
共有テンプレート ari_seoシリーズ では、「画像の変更などもOK!」 としているので、画像を差し替えて利用しているユーザーさんも多く見られますが、恐らく最初につまづく部分が ここではないでしょうか。。。
ヘッダーに入れる画像 によっては、リンク背景 (読めなくならないようにデフォルトで白色を設定しています) が目立ち過ぎてちょっと格好悪くなってしまう場合も。 そんな時にも有効に使える(かもしれない)方法です。






お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-122.html
2010/04/02 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |