[CSS]背景画像を使用しないでCSSスプライトのような効果を得るスタイルシート

Jennifer Semtner.comのエントリーから、背景画像を使用しないで、CSSスプライトのように複数の画像要素を一枚の画像で表示するスタイルシートを紹介します。

extending css spriting

仕組みを簡単に説明すると、「clip:rect」で指定箇所のみ表示するというものです。

利点としては、IE6 PNG fixとの共存、背景を印刷可にしなくても印刷可などが挙げられています。

サンプルのコードでは画像をdivで囲っていますが、コメントよりaで囲むパターンが追記されています。

HTML

<a class="menu-contact" href="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png" target="_blank" title="Full Image"><img class="transparent_png" src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png" alt="Contact" width="611" height="39" /></a>

CSS

a.menu-contact {display: block; width: 106px; height: 29px; position: relative; top: 0; left: -399px; }
a.menu-contact img {position: absolute; clip: rect(0 505px 29px 399px); }

そもそも、CSSスプライトの定義と違うとも思うのですが、アルファPNGの対応と印刷は魅力を感じます。

Post on:2008年12月12日