ご迷惑をおかけして申し訳ありません。CSSが大好きですよね?とにかく、2 つの解決策があります。もう 1 つは当面の解決策の外に出て、少し余分に追加しますが、堅実で、どのような高さでも機能します。どちらも任意の幅で機能します。
だから最初のもの:
これは、xposbackground-position
のキーワード値center
と ypos のパーセンテージ値1000%
を設定することで機能します。もちろん、% の値はさまざまですが、安全のために 1000% にしました。実際には、これを画面から押し出すのに十分な大きさにすることができます。しかし、ここにフィドルがあります:
http://jsfiddle.net/D5QME/
これの問題は、親要素の高さを背景画像の正確な高さにすると...動作しなくなることです。親要素の高さが画像の高さよりも小さくなると、パターンが逆になります。したがって、親要素が常に BG 画像よりも高いと確信している場合、これはかなり確実です。
今2番目のもの:
これは真っ直ぐにしっかりしていますが、余分な要素を追加します. この追加の要素は、a などのプレースホルダー要素にすることもdiv
、ストレートimg
自体にすることもできます。これ:
1)親position: relative
で andoverflow: hidden
を使用してコンテナに変換します
2) position: relative
、margin: 0 auto
、およびtop: 100%
を使用して画像を中央に配置し、親のすぐ下に押し込みます
3) を使用して、ユーザーが親要素の上に移動したとき.parent:hover .backgroundImage
に画像を遷移させます。top: 0%
hover
フィドルは次のとおりです。
http://jsfiddle.net/Fwf6p/
これにより要素が追加されますが、かなり堅実です。
とにかく、これが役に立てば幸いです!
-J・コール・モリソン