CSS: градиент сверху и снизу внутри рамки?

Question

У меня есть IFRAME на моем веб-сайте. Он имеет ширину около 300 пикселей и высоту 200 пикселей (но имеет контент высотой более 1000 пикселей).

КАДР можно прокручивать.

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

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

Вот так

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