CSS：IFRAME中頂部和底部的漸變？

Question

我在我的網站上有一個IFRAME。這是關於300像素寬200像素高（但有內容約1000 +像素高的價值。

的IFRAME是滾動的。

我想要做的是在頂部有一個小的透明（阿爾法）梯度總是所述伊夫蘭的內部/底部不管其中用戶已經滾動。

這樣，每當用戶垂直滾動，透明/α-梯度始終保持在頂部和底部這兩者。

像這樣

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

我該如何用CSS實現這個功能？

感謝

Answer 1

如果你可以編輯的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或類似使用。

Answer 2

您將需要設置背景爲固定，以便當iframe滾動背景圖像停留在同一位置：

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