CSS：IFRAME中顶部和底部的渐变？

我在我的网站上有一个IFRAME。这是关于300像素宽200像素高（但有内容约1000 +像素高的价值。CSS：IFRAME中顶部和底部的渐变？

的IFRAME是滚动的。

我想要做的是在顶部有一个小的透明（阿尔法）梯度总是所述伊夫兰的内部/底部不管其中用户已经滚动。

这样，每当用户垂直滚动，透明/α-梯度始终保持在顶部和底部这两者。

像这样

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

我该如何用CSS实现这个功能？

感谢

来源

2009-10-27 Teddi

如果你可以编辑的iframe的内容（也就是说，它不是来自外部源），您可以通过使用不透明度渐变的两个图案并将它们放置在文档的顶部和底部，并使用position：fixed; CSS风格。 http://koti.mbnet.fi/wolfram/gradient.html

PS：

<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>

我在做了一个测试页面出了这对IE的兼容性，你可能会想用pngfix.js或类似使用。

来源

2009-10-27 16:54:14 Kaivosukeltaja

这正是我所寻找的 – Teddi

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

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

来源

2009-10-27 16:39:10

CSS：IFRAME中顶部和底部的渐变？

回答

相关问题