CSS : IFRAME의 위쪽과 아래쪽의 경사?

Question

웹 사이트에 IFRAME이 있습니다. 그것은 높이 200 픽셀 약 300 픽셀 폭입니다 (단, 컨텐츠의 약 1000 + PX 키 큰 가치가있다.

iframe을 스크롤합니다.

는 내가하고 싶은 것은 상단에 항상 작은 투명 (알파) 기울기를 가지고있다 에 관계없이 사용자가 스크롤 한 곳의 이프 란의 내부/바닥. 사용자가 스크롤 수직, 투명/알파 기울기는 항상 상단과 하단 모두에 남아 때마다 그래서

.

그래서

처럼

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

CSS로 어떻게 수행 할 수 있습니까?

감사

Answer 1

당신은 iframe의 내용을 편집 할 수있는 경우 (즉, 외부 소스가 아닌 경우) 불투명도 그래디언트로 두 개의 패턴을 만들어 위치를 고정하여 문서의 위쪽과 아래쪽에 배치하면됩니다. 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; 
}