웹마스터 팁
팁이라고 할 수 없는 [이미지안투명박스]
2007.12.23 03:13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>투명만들기^^</TITLE>
<style type="text/css">
.img_con
{
position:relative;
margin:1px;
float:left;
width:220px;
height:190px;
z-index:54;
}
.r_ima { position:absolute; }
.text_box {
position:absolute;
width:100%;
height:17px;
margin-top:170px;
_margin-top:173px;
padding-top:3px;
background-color:#000000;
filter:Alpha(opacity:50);
opacity:0.5;
font-size:8pt;font-family:돋움;
color:#ffffff;
overflow:hidden;
text-align:center;
z-index:55;
}
</style>
</HEAD>
<BODY>
<div>
<div class="img_con">
<img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
<div class="text_box">풍경화 그림</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
<div class="text_box">풍경화 그림</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
<div class="text_box">풍경화 그림</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://www.3aok.com/images/888.gif" width="220" height="190">
<div class="text_box">제로보드에서 그누보드</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://www.donga.com/photo/news/200712/200712100243.jpg" width="220" height="190">
<div class="text_box">소녀시대 이승철과</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
<div class="text_box">풍경화 그림</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
<div class="text_box">풍경화 그림</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
<div class="text_box">풍경화 그림</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
<div class="text_box">풍경화 그림</div>
</div>
<div class="img_con">
<img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
<div class="text_box">풍경화 그림</div>
</div>
</div>
</BODY>
</HTML>
filter alpha를 이용했습니다. FF나 Opera에서는 안되므로 꽁수를 썻습니다.
그림크기는 항상 220 에 190을 유지해야하며
div는 위와같은 형식만 취해주면 됩니다.
div나 이미지크기를 변경할경우 자동으로 위치를 맞춰주게 하려고했는데..
당장 필요한 식으로 만들어서 그렇게는 안해봤습니다 ^^;
초보라 css가 불필요한게 있을지도 모릅니다.
고수분들께서는 잘도와주시면 좋겠습니다 ^^
그림 div.img_con 을 100개를 넣든 8개를 넣든 자동으로 줄바꿈은 됩니다.
FF+IE 다됩니다.
- [2018/03/17] 묻고답하기 CSS ㅡ divA 안에있는 하위 divB 의 크기를 divA 보다 넓게 보이게 하려면 *2
- [2016/09/13] 묻고답하기 제목에 html, css 가능하도록 하기? *2
- [2016/06/30] 묻고답하기 xe 1.4.0버전 사용중입니다 *1
- [2016/01/05] 묻고답하기 ie10, 11번전 css문제
- [2015/07/16] 묻고답하기 widget을 감싸고 있는 박스에 미디어쿼리를 넣고 싶습니다 *2
제목 | 글쓴이 | 날짜 |
---|---|---|
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] | CoolUnit | 2004.03.01 |
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] | PHASE | 2004.01.19 |
스크롤바 색상을 아름답게. [17] | 해리포터포에버 | 2003.12.16 |
마우스 커서에 대해서... [16] | impre | 2003.09.20 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때... [9] | PHASE | 2003.09.08 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1) [31] | 토끼군 | 2003.08.20 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] | @kihwa | 2003.07.26 |
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치 [31] | @kihwa | 2003.07.26 |
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] | @kihwa | 2003.07.11 |
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] | 쭘's | 2003.07.07 |
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] | 쭘's | 2003.06.16 |
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] | 쭘's | 2003.06.07 |
css3 안쪽과 바깥쪽 그림자 만들기 입니다 | 낮은자 | 2014.03.06 |
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] | 999 | 2011.01.11 |
노프레임 홈페이지 만들기 강좌 | H.N커뮤니티 | 2009.02.28 |
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) | H.N커뮤니티 | 2009.02.22 |
css 정리 파일(한글) [3] | 미곰탱 | 2009.01.22 |
스크립트 모음 [1] | *이종민* | 2008.11.29 |
계산기 [1] | *이종민* | 2008.11.29 |
바탕화면에 바로가기 만들기 | *이종민* | 2008.11.29 |
정말 신기하네요 ^^감사합니다.