0

ページのサイズに合わせて拡大縮小するように、パーセンテージ幅のCSSロールオーバー画像を作成する方法を知っている人はいますか？

http://www.vision.to/css-only-single-image-fast-rollover.phpに示されている方法は、画像スプライトを背景画像として設定するため、使用できないと思います。

私が見た他の唯一のCSSメソッドはここにありました：http：//thefiles.macadamian.com/2008/06/pure-css-image-rollover-without.html
私はこのメソッドが好きですが、それを使用できるかどうか疑問に思いました画像を個別にロードする必要があるのとは対照的に、画像スプライト。

あいまいに聞こえたら申し訳ありませんが、これらの質問を読むときはいつも、それらを書いている人はそれらが何を意味するのかを正しく説明していないと思います。助けてくれてありがとう:)

4

2 に答える 2

0

IE8 以前をサポートする必要がない場合は、CSS3background-sizeプロパティをパーセンテージ値で使用できます。

前景画像と同様に、スプライト ファイルは適切なオプションではない可能性があります。画像がスケーリングされると、スプライト ファイルの複雑さが増します。はbackground-position画像のスケーリングされたサイズに基づいており、パーセンテージ値を使用して正確な位置を取得することには問題があります。

于 2012-07-15T14:50:55.253 に答える
0

スプライトでこれを行う方法がわかりません。それらは、要素 (通常は DIV) の背景として大きな画像を設定し、画像の必要な部分のみが表示されるように位置を変更することによって行われます。異なる DIV は、背景画像の位置を変更することにより、画像の異なる部分を表示できます。

ただし、背景画像を拡大縮小することはできません。常に 1:1 で表示されます。要素内でそれらを繰り返すようにすることも、繰り返さないようにすることもできますが、それらを拡大縮小することはできないため、スプライトのアイデアはありません。

投稿したリンクで示されているように、個別の画像でそれを行うのはかなり簡単です。

ロールオーバー用の画像のプリロードは非常に簡単です。画像を非表示にする CSS を設定した画像タグを含めるだけです。

<img src='myrolloverimage.jpg' style='visibility:hidden; display:none;' />
于 2012-07-15T13:28:42.257 に答える