透過PNG素材の背景が透けません

透過PNGの「透過」の効果を表すためには、透過PNGに対応したブラウザが必要です
「透過PNG」と表記されている素材をご利用の際は、以下の点をご留意ください。

  • 閲覧者側に、透過PNGに対応したブラウザが必要です(IE6以下は未対応です)
  • JavaScript等を併用することで、未対応ブラウザでも透過の効果を再現することができます

以下に、透過PNG対応/未対応ブラウザの比較用画像を用意しましたので、参考にしてください。


透過PNG見本 見本画像(graphic>icon/button>メニュー(ボタン)005)
透過PNG見本 上の見本画像は、透過PNG対応ブラウザでは左のように見えます
透過PNG見本 未対応ブラウザ(IE6の場合)では左のように見えます

透過PNG対応ブラウザで閲覧する場合は、特別な処理をしなくても透過の効果が表れます。
未対応ブラウザで閲覧する場合は、画像の背景に色がついているように表示されます。
ご利用の際はご自身のサイトの閲覧状況とご相談ください。

JavaScriptを使った透過方法はここでは言及しませんが、 既に多くの関連記事がネット上に存在しますので興味のある方は検索してみてください。

※ 上記は、「画像は透過されているのにブラウザで再現できない」ケースを焦点にしていますが、 素材を加工した場合は、その際に「画像から透過の効果そのものが失われている」可能性があります。
透過PNG素材を加工する場合は、透過PNG形式で保存できるソフトをご利用ください。

スポンサーリンク
レスポンシブ