1

CSS を使用して、背景画像の上部を要素の下部に揃えたいと考えています (transitionホバー時に、またはアニメーションで表示できるようにするためです)。この要素には高さが設定されていません。要素の高さがわかりません。誰もこれを行う方法を知っていますか? ソリューションは IE 互換である必要はありません。Chrome と Firefox の最新バージョンでのみ動作する必要があります。

編集:<body>バウンティが終了するまでにそのような回答がある場合、その要素に対しても機能する回答にバウンティを授与します。

4

4 に答える 4

7

ご迷惑をおかけして申し訳ありません。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・コール・モリソン

于 2012-08-09T02:07:22.583 に答える
2

J Cole's answer の別の変更ですが、 body タグで動作するようです。Hephistocles の変更でも動作する可能性がありますが、テストしていません。

CSS:

.example{
    border: 1px solid red;
/* Change the height to anything you want! */       
    height: 400px;
/* Change the width to anything you want! */
    width: 500px;
    position: relative;
}

.example:hover .backgroundImage{
    height: inherit;
    top: 0%;
}

.backgroundImage{
    background: url("http://img.gadgetian.com/Angry-Birds-Space-021-300x300.png") no-repeat top center;
    position:relative;
    margin: 0 auto;
    top: 100%;
    -webkit-transition: 1s ease all;
    -moz-transition: 1s ease all;
    transition: 1s ease all;
    height: 0px;    
}

HTML:

<body class="example">
    <div class="backgroundImage"></div>
</body>

JSFiddle

于 2012-08-15T15:41:58.710 に答える
1

J Cole の 2 番目の回答をさらに進めるには、余分な要素を挿入したくない場合は、いつでも疑似要素を使用できます。例えば：

.myElm {
    position: relative;
    overflow: hidden;
}
.myElm:after{
    content:"";
    background: url("myimage.png") no-repeat top left;
    top:100%;
    position: absolute;
}
.myElm:hover:after {
    top:0;  
}
于 2012-08-10T18:13:27.780 に答える
0

要素の高さがピクセル単位でわかっている場合は、背景の位置を次のように設定できる場合がありますbackground-position:0 npx;。そうでなければわかりません。最大の高さがある場合は、いつでもそれを使用できます。または、合理的な見積もり/制限があります。ただし、トランジションは非常に均一に「緩和」されない場合があります。

ちょうど今、別の回答に優れたJSFiddleがありましたが、削除されました:(

于 2012-07-11T20:05:16.717 に答える