Question

我正在尝试淡出文本而不是用于溢出的粗糙剪辑，文本在边缘消失（静态;不是动画效果）。我在背景上使用了一个图像来引起淡入淡出（我可能会对这种做法不以为然;让我知道......）

一切都很好，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/

Answer 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的边界。

淡出框边界附近的文本并缩放图像以适合自动尺寸父项

1 个答案: