아이프레임 투명하게 만드는 방법

HTML 2010. 11. 18. 13:49

아이프레임으로 공지 등을 불러올때 공지 배경을 투명하게 하는 방법.

 

공지의 body 태그에 style="background-color:transparent" 를 넣어준다.


(body style="background-color:transparent" leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>

 

그리고 공지를 불러오는 아이프레임 태그에 allowTransparency=false를 넣어준다.

(iframe allowTransparency=false src='주소' width='100%' height='100' frameborder='no' scrolling='no'>

========================

 

배경이 있는 곳에서 아이프레임을 사용 할 때 유용하게 쓰임.

 

불투명 아이프레임(IE 5.5 이상)

 

iframe 소스안에 style="filter: Alpha(Opacity=60);"

이것만 추가.

 

투명 아이프레임(IE 5.5 이상)

 

iframe 소스 안에 allowTransparency="true"

이것을 추가.

그리고 아이프레임 내부에 들어갈 문서 body의 < > 안에 style="background-color:transparent" 를 추가.


=======================

 

 투명한 iFrame 만들기


iframe을 사용해 웹 페이지 중간에 다른 페이지의 내용을 넣을때가 종종 발생한다.

하지만 웹 페이지의 백그라운드의 컬러나 이미지가 들어가 있는상태면 iframe을 넣을 경우 웹페이지 백그라운드와

iframe의 백그라운드간의 배경이 매칭되지 않는 경우가 있다.

이럴때 iframe의 속성값을 줘서 투명하게 매칭시킬 수 있는 방법이있으니,,,

 

source :

 

 웹페이지
<iframe src="웹페이지 주소" allowTransparency="true" width="가로크기" height="세로크기></iframe>

 

 

 iframe에 들어갈 페이지
<body style="background:transparent;">

 

Relation property
배경을 투명하게 하는 방법도 있지만 iframe자체를 투명하게 해줄 수 있는 방법도 있다.

방법은 아래

 

<iframe src="" style="filter:Alpha( Opacity=50 );">

이와 같이 Alpha값의 Opacity값을 변경해 주면 된다.

'HTML' 카테고리의 다른 글

비디오  (0) 2011.05.12
펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론  (0) 2011.03.09
HTML5 표준 기술과 서비스 생태계 변화  (0) 2011.01.24
파비콘  (0) 2010.05.14
올바른 Table 사용  (0) 2010.04.01
: