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%;

}

我将以下 CSS 添加到div包装图像的内容中：

.wrapper {
      position:relative; 
}

我添加position:relative到包装 div 中，因为我们需要绝对定位图像，但相对于它所包含的 div 的边界。

于 2012-08-15T04:40:26.603 回答