CSS: Градиент сверху и снизу внутри IFRAME?

Question

У меня есть IFRAME на моем веб-сайте. Речь идет о 300px ширины 200px высокой (но имеет около 1000 + рха высокой ценности содержания.

IFRAME прокручивать.

То, что я хочу сделать, это небольшой прозрачный (альфа) градиент всегда на вершине/снизу внутри Ifrane независимо от того, где пользователь прокручиваются.

Так что всякий раз, когда пользователь прокручивает вертикально, прозрачный/альфа-градиенты всегда остаются в верхней и нижней части.

как так

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

Как это сделать с помощью CSS?

Благодаря

Answer 1

Если вы можете редактировать содержимое фрейма (т. е. не из внешнего источника), вы можете выполнить это, создав два шаблона с градиентом непрозрачности и поместив их в верхнюю и нижнюю части документа с положением: fixed; 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; 
}