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

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자체를 투명하게 해줄 수 있는 방법도 있다.

방법은 아래

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

좌충우돌 웹퍼블리셔 일기