Question

我的网站上有一个IFRAME。它大约300px宽，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完成此操作？

由于

Answer 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或类似的一起使用。

Answer 2

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

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

CSS：顶部和梯度的渐变IFRAME里面的底部？

2 个答案: