将渐变淡化添加到溢出容器的内容中

Question

1. 我正在尝试在溢出a的内容上添加渐变渐变，如下所示：http://jsfiddle.net/6k3vV/
2. 在div上我的设置高度为200像素
3. 我想根据内容是否实际溢出200px
来显示淡入淡出

如果我已经加载了所有内容/资源，那么工作正常：

<h1>Hello World</h1>之类的东西可以正常工作，我可以计算出占用的高度   如果我将其插入文件

但是，如果我有<h1>Hello World</h1><img src=".." />这样的东西，它将无法正常工作，因为我无法可靠   确定内容占用的高度，直到图像本身加载为止。

我正在尝试在评论页面上添加此功能，我将每个评论注入包装div并可选 显示渐变渐变。我正在考虑的当前解决方案是检查并标记和附加onload 事件处理程序，它将在图像加载后计算高度。

有更好的方法吗？

Answer 1

由于你有一个设定的高度，这很容易。在doc load（或事件）上，只需检查每个“section”的高度，如果该高度大于200，则附加一个div w / class fadeout。

Fiddle for you

我建议您在<section>元素中添加一个类，而不是将该元素用作整个选择器。

您可能想要使用height .fadeout作为%而不是em