[CSS]背景画像を使用しないでCSSスプライトのような効果を得るスタイルシート
Post on:2008年12月12日
Jennifer Semtner.comのエントリーから、背景画像を使用しないで、CSSスプライトのように複数の画像要素を一枚の画像で表示するスタイルシートを紹介します。
仕組みを簡単に説明すると、「clip:rect」で指定箇所のみ表示するというものです。
利点としては、IE6 PNG fixとの共存、背景を印刷可にしなくても印刷可などが挙げられています。
サンプルのコードでは画像をdivで囲っていますが、コメントよりaで囲むパターンが追記されています。
HTML
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <p><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></p> </textarea> |
CSS
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> 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); } </textarea> |
そもそも、CSSスプライトの定義と違うとも思うのですが、アルファPNGの対応と印刷は魅力を感じます。
sponsors