CSS：IFRAME内顶部和底部的渐变？答案

【问题标题】：CSS: Gradient at top & bottom inside the IFRAME?CSS：IFRAME内顶部和底部的渐变？
【发布时间】：2009-10-28 01:09:47
【问题描述】：

我的网站上有一个 IFRAME。它大约 300px 宽 x 200px 高（但内容的高度大约为 1000+px。

IFRAME 是可滚动的。

无论用户滚动到哪里，我想要做的是始终在 IFRANE 内部的顶部/底部有一个小的透明 (alpha) 渐变。

因此，每当用户垂直滚动时，透明/alpha 渐变始终保持在顶部和底部。

像这样

----------------------------------------
| gradient   gradient  gradient    | S |
------------------------------------ C |
|            content               | R |
|                                  | O |
|            content               | L |
|                                  | L |
|            content               | B |
------------------------------------ A |
| gradient   gradient  gradient    | R |
----------------------------------------

我如何使用 CSS 实现这一点？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

如果您可以编辑 iframe 的内容（也就是说，它不是来自外部来源），您可以通过使用不透明度渐变制作两个图案并将它们放置在文档的顶部和底部位置来完成此操作：固定的; CSS 样式。

<div style="background: url(upgradient.png) repeat-x; width: 100%; height: 100px; position: fixed; top: 0px;"></div>
<div style="background: url(downgradient.png) repeat-x; width: 100%; height: 100px; position: fixed; bottom: 0px;"></div>

我在http://koti.mbnet.fi/wolfram/gradient.html做了一个测试页

PS：为了兼容 IE，您可能希望将其与 pngfix.js 或类似文件一起使用。

【讨论】：

这正是我想要的

【解决方案2】：

您需要将背景设置为固定，以便在滚动 iframe 时背景图像保持在同一位置：

iframe {
background: transparent url('gradient.png') repeat-x fixed top;
}

【讨论】：