向溢出容器的内容添加渐变淡入淡出

Question

1. 我试图在溢出的内容上添加渐变淡入淡出，如下所示：http://jsfiddle.net/6k3vV/
2. 在div上，我设置了200像素的高度
3. 我想根据内容是否真的溢出200px来选择性地显示渐变

如果我已经加载了所有内容/资源，一切都会正常进行：

像<h1>Hello World</h1>这样的东西会很好用，我可以计算出它将占据的高度如果我把它插入文件

然而，如果我有类似<h1>Hello World</h1><img src=".." />的东西，它将无法工作，因为我无法可靠地工作确定内容将占据的高度，直到加载图像本身为止。

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

有更好的方法吗？

Answer 1

由于您有一个设定的高度，所以这很容易。在加载文档(或事件(时，只需检查每个"section"的高度，如果该高度大于200，则附加一个div w/类fadeout。

Fiddle for you

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

您可能想将.fadeout的height用作%，而不是em