1

私はテキストをフェードアウトさせようとしているので、オーバーフローの厳しいクリップではなく、テキストが端でフェードアウトします（静的、アニメーション効果ではありません）。背景の上に画像を使用してフェードを発生させています（このアプローチから外れている可能性があります。お知らせください...）

すべてがうまく機能し、高さ1pxの画像は幅/高さで完全にスケーリングされます...最も外側に<div>. の高さに合わせて拡大縮小したいのですTOP-DIV-Textが、方法がわかりません。

<div style="font-weight:bold; height: 100%; width: 200px; white-space: nowrap; overflow:hidden; background-color: #7E7EFF;" id="yomama">
<div>
  <img height="100%" style="position:relative; float:right;" width="50%" src="http://s12.postimage.org/o4bptewwp/fadeout.png" >
  <span style="color=green; font-size: 60px;">
  <u>
    TOP-DIV-Text
  </u>
  </span>
</div>
<div valign="top">
    <span style="color:red; font-size: 30px; white-space: nowrap;">
    <div>
    Middle-Div is a chatty guy
    <br>
    </div>
    <div style="color:blue">
    Bottom div has some more text
    </div>
    </span>
</div>
</div>

http://jsfiddle.net/ZEDFV/1/

4

1 に答える 1

1

達成している結果は、フローティング画像の予想される動作です。残念ながら、コンテナがオーバーフローします。

画像をトップ div 内にとどめたい場合は、画像を絶対に配置する必要があります。私の更新された例を見てください: http://jsfiddle.net/ZEDFV/2/

画像の CSS を次のように更新しました。

.fader {
    position:absolute; 
    top:0;
    right:0;
    height:100%;
    width:50%;

}

divそして、画像をラップしているに次の CSS を追加しました。

.wrapper {
      position:relative; 
}

position:relative画像を絶対に配置する必要があるため、ラッピング divに追加しましたが、それが囲まれている div の境界に対して相対的です。

于 2012-08-15T04:40:26.603 に答える