그림안에 투명텍스트박스 넣기...

e엔시

· 17년 전 · 조회 5168 5168 · 댓글 4 4

<!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>

</BODY>
</HTML>

그림크기는 항상 220 에 190을 유지해야하며
div는 위와같은 형식만 취해주면 됩니다.
div나 이미지크기를 변경할경우 자동으로 위치를 맞춰주게 하려고했는데..
당장 필요한 식으로 만들어서 그렇게는 안해봤습니다 ^^;
초보라 css가 불필요한게 있을지도 모릅니다.
고수분들께서는 잘도와주시면 좋겠습니다 ^^

그림 div.img_con 을 100개를 넣든 8개를 넣든 자동으로 줄바꿈은 됩니다.

FF+IE 다됩니다.

[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]

첨부파일

투명텍스트박스.html (2.6 KB, 318회)

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 4개

웹마짱구

프로필 보기 이 회원 글보기 이 회원의 댓글보기

17년 전

이뿌네요..

travis

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

테스트해보니 이뿌게 나옵니다.

까궁

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

감사합니다~^^

아침안개

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

감사합니다

게시글 목록

번호	제목	글쓴이	조회	날짜
12537	기타 초보자를 위한 포토샵 강좌 48	갈색야생마	2,841	17년 전
29323	HTML 초보자를 위한 포토샵 강좌 47	갈색야생마	1,589	17년 전
12536	JavaScript 초보자를 위한 포토샵 강좌 46	갈색야생마	1,340	17년 전
12535	기타 초보자를 위한 포토샵 강좌 45	갈색야생마	2,005	17년 전
12534	기타 초보자를 위한 포토샵 강좌 44	갈색야생마	1,456	17년 전
12533	기타 초보자를 위한 포토샵 강좌 43	갈색야생마	1,396	17년 전
29322	HTML 초보자를 위한 포토샵 강좌 42	갈색야생마	1,338	17년 전
12532	기타 초보자를 위한 포토샵 강좌 41	갈색야생마	1,550	17년 전
12531	기타 초보자를 위한 포토샵 강좌 40	갈색야생마	2,045	17년 전
12530	기타 초보자를 위한 포토샵 강좌 39	갈색야생마	1,426	17년 전
29321	HTML 초보자를 위한 포토샵 강좌 38	갈색야생마	1,401	17년 전
12529	JavaScript 초보자를 위한 포토샵 강좌 37	갈색야생마	1,204	17년 전
12528	기타 초보자를 위한 포토샵 강좌 36	갈색야생마	1,436	17년 전
12527	기타 초보자를 위한 포토샵 강좌 35	갈색야생마	1,167	17년 전
12526	기타 초보자를 위한 포토샵 강좌 34	갈색야생마	1,296	17년 전
29320	HTML 초보자를 위한 포토샵 강좌 33	갈색야생마	1,554	17년 전
12525	JavaScript 초보자를 위한 포토샵 강좌 32	갈색야생마	1,389	17년 전
12524	기타 초보자를 위한 포토샵 강좌 31	갈색야생마	1,286	17년 전
12523	기타 초보자를 위한 포토샵 강좌 30	갈색야생마	1,258	17년 전
29319	HTML 초보자를 위한 포토샵 강좌 29	갈색야생마	1,370	17년 전
12522	JavaScript 초보자를 위한 포토샵 강좌 28	갈색야생마	1,147	17년 전
12521	기타 초보자를 위한 포토샵 강좌 27	갈색야생마	1,196	17년 전
12520	기타 초보자를 위한 포토샵 강좌 26	갈색야생마	1,234	17년 전
12519	기타 초보자를 위한 포토샵 강좌 25	갈색야생마	1,305	17년 전
29318	HTML 초보자를 위한 포토샵 강좌 24	갈색야생마	1,324	17년 전
12518	JavaScript 초보자를 위한 포토샵 강좌 23	갈색야생마	1,336	17년 전
12517	기타 초보자를 위한 포토샵 강좌 22	갈색야생마	1,301	17년 전
12516	기타 초보자를 위한 포토샵 강좌 21	갈색야생마	1,621	17년 전
29315	HTML 레이어 달력... 2	조정영	2,951	17년 전
25032	계약서 웹디자인 재택근무계약서 3	깨찰빵	3,350	17년 전
25030	경력증명서 1	디렉터	1,443	17년 전
25028	계약서 매매계약서 1	디렉터	1,542	17년 전
25027	생활속에 유익한 금전차용증	디렉터	1,349	17년 전
25026	[엑셀]만년달력입니다.(월)	디렉터	2,108	17년 전
25024	[엑셀]만년달력입니다.(년도별) 1	디렉터	3,020	17년 전
25022	손익계산서1 1	디렉터	1,366	17년 전
80	php 질문입니다. (초초보) 3	가리마	1,356	17년 전
29314	HTML 초보자를 위한 포토샵 강좌 20	갈색야생마	1,354	17년 전
12515	JavaScript 초보자를 위한 포토샵 강좌 19	갈색야생마	1,219	17년 전
12514	기타 초보자를 위한 포토샵 강좌 18	갈색야생마	1,410	17년 전
12513	기타 초보자를 위한 포토샵 강좌 17	갈색야생마	1,469	17년 전
12512	기타 초보자를 위한 포토샵 강좌 16	갈색야생마	1,276	17년 전
29313	HTML 초보자를 위한 포토샵 강좌 15	갈색야생마	2,562	17년 전
12511	JavaScript 초보자를 위한 포토샵 강좌 14	갈색야생마	1,309	17년 전
12510	기타 초보자를 위한 포토샵 강좌 13	갈색야생마	1,577	17년 전
12509	기타 초보자를 위한 포토샵 강좌 12	갈색야생마	1,455	17년 전
12508	기타 초보자를 위한 포토샵 강좌 11	갈색야생마	1,760	17년 전
12506	기타 초보자를 위한 포토샵 강좌 10 1	갈색야생마	1,784	17년 전
25021	계약서 인터넷업무제휴계약서	디렉터	1,798	17년 전
25019	계약서 저작권 양도계약서 1	디렉터	1,848	17년 전
25017	계약서 업무계약서 1	디렉터	1,510	17년 전
78	MYSQL고수님들 도와주세요... 흑흑흑 1	리일혁	1,594	17년 전
12505	기타 초보자를 위한 포토샵 강좌 9	갈색야생마	1,506	17년 전
29311	HTML 초보자를 위한 포토샵 강좌 8 1	갈색야생마	1,850	17년 전
12504	JavaScript 초보자를 위한 포토샵 강좌 7	갈색야생마	1,751	17년 전
12503	기타 초보자를 위한 포토샵 강좌 6	갈색야생마	1,546	17년 전
12502	기타 초보자를 위한 포토샵 강좌 5	갈색야생마	1,731	17년 전
12501	기타 초보자를 위한 포토샵 강좌 4	갈색야생마	1,399	17년 전
29310	HTML 초보자를 위한 포토샵 강좌 3	갈색야생마	1,624	17년 전
12500	JavaScript 초보자를 위한 포토샵 강좌 2	갈색야생마	1,944	17년 전
12499	기타 초보자를 위한 포토샵 강좌 1	갈색야생마	2,781	17년 전
12496	기타 iconv 활용하기 2	엑스엠엘	1,990	17년 전
75	하수를 도와주세요 ㅠㅠ 2	얼뚱이	1,391	17년 전
12495	JavaScript RED5 Documentation PDF	관리자	1,943	17년 전
12491	MySQL 모바일 게시판 ANYBBS PHP 버전 3	벅스	2,401	17년 전
12489	기타 파일을 이미지로 만들기 1	김무게	1,560	17년 전
73	퀵메뉴 무한 스크롤 안되게 하는 법좀 가르쳐주세요~~ 1	아제아제	2,315	17년 전
12488	기타 부드러운 움직임 2	sini117	1,750	17년 전
12487	기타 부드러운 움직임	sini117	1,451	17년 전
71	질문은 아니지만.. 1	nooree	1,308	17년 전
12486	MySQL Data Type Storage Requirements	관리자	1,987	17년 전
12479	JavaScript [펌] 웹방화벽 mod_security 다운로드 및 설정 6	관리자	2,880	17년 전
29308	HTML 이미지미리보기시 라이트박스플러스 사용하기 1	유창화	2,495	17년 전
62	php explode함수 질문 (도와주세요 ㅠㅠ) 8	아제아제	1,518	17년 전
12476	기타 apache 재시작 2	꽃순이	2,866	17년 전
12475	MySQL 윈도우 Mysql 시동 & 중지 명령어	꽃순이	2,401	17년 전
12474	MySQL mysql 기본 사용법	꽃순이	2,747	17년 전
12471	MySQL mysql 기본 사용법 2	꽃순이	2,762	17년 전
12470	MySQL mysql 버전확인	꽃순이	2,543	17년 전
12467	MySQL 페도라 설치후 mysql이 원격으로 접속이 안될때 2	꽃순이	2,364	17년 전
12465	기타 cgi 세팅 - httpd.conf 1	꽃순이	1,714	17년 전
12463	MySQL mysql5 euckr 덤프 옵션 1	꽃순이	2,453	17년 전
12462	MySQL Fedora Core 6(x86_32) + DNS + sendmail + dovecot + APM(RPM) + APM(SOURCE COMPILE)	꽃순이	3,941	17년 전
12461	기타 입체분할 액션스크립트	10년째초짜	1,819	17년 전
61	php xml파서인데 xml문자셋타입이 UTF-8이고 서버및 DB 타입은 EUC-KR입니다. 한글깨짐 및 에러가 나오는데 수정좀..	곰돌이1	3,902	17년 전
54	게시판리스트를 엑셀로 다운받으면 이상하게 됩니다.. 6	명함아이	1,833	17년 전
46	문자열 자르기에 대한 질문일것 같습니다. 7	아길이	1,725	17년 전
12458	Flash [질문] 플래쉬 영역밖으로도 메뉴가 보이는거 아시는분~ 2	사다드	2,068	17년 전
12456	기타 네이버인기검색어 내사이트에 아이프레임으로 넣기 1	유창화	2,468	17년 전
43	자바스크립 고수님 들..ㅠ.ㅠ 도와주세요.. 2	rino	1,417	17년 전
12455	JavaScript 전자계산기 스크립트	자인	1,763	17년 전
29304	HTML 웹페이지 프린트하는 스크립트 3	자인	2,328	17년 전
29303	HTML 자동새로고침	자인	1,800	17년 전
29302	HTML 스타크래프트 로딩 스크립트	자인	1,751	17년 전
29300	HTML 미디어 연주기 소스 1	자인	1,538	17년 전
12454	기타 메일 폼 스크립트	자인	1,380	17년 전
29299	HTML status바 반짝반짝	자인	1,335	17년 전
29298	HTML 메뉴가 하늘에서 뚝뚝 떨어집니다.	자인	1,150	17년 전
12453	JavaScript 텍스트 이동(물흐르듯이)	자인	1,139	17년 전
29297	HTML 멀티플 시계스크립트	자인	1,170	17년 전

이전 다음

63 64 65 66 67

전체 목록