테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

e엔시
프로필 보기이 회원 글보기
 · 17년 전 · 5167 · 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 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>

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

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

FF+IE 다됩니다.

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

첨부파일

투명텍스트박스.html (2.6 KB, 317회)
목록
이전글 다음글

댓글 작성

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

로그인하기

댓글 4개

웹마짱구
프로필 보기이 회원 글보기
 17년 전
이뿌네요..
travis
프로필 보기이 회원 글보기
 14년 전
테스트해보니 이뿌게 나옵니다.
까궁
프로필 보기이 회원 글보기
 14년 전
감사합니다~^^
아침안개
프로필 보기이 회원 글보기
 14년 전
감사합니다

게시글 목록

번호 제목
12452
JavaScript 마우스를 따라다니는 그림
40
네이버 처럼 실시간으로 신문사로 신문기사 받아오기.. 2
25015
ASCIIcode표 1
12447
Flash [질문] 랜덤으로 움직이는 무비클립을 영역밖으로 이동할 수 있는 방법이 있을까요? 4
12446
JavaScript SQLPLUS & PLSQL 기초
12445
JavaScript PLSQL이란
29296
HTML 동적 INPUT 박스
12440
기타 메뉴 4
12438
Flash 창밖에 풍경 1
12437
JavaScript 우분투 root관리자 접속 방법 (펌)
29294
HTML 우키막기 1
35
latest() sql 4
32
고수님들! 해결 좀 부탁드립니다. 메인화면에 공지사항이 안보이네요~~ 2
12434
JavaScript tar로 묶을때 특정 디렉토리나 파일 포함하지 않고 묶기 2
12433
Flash 도스상에서 플렉스 사용하기
12432
기타 INPUT 숫자만 입력받기
29293
HTML 컨텐츠 팝업 출력 소스
29
[php질문]세션 로그아웃되는 문제 (php소스에서처리가능한가요?) 2
12431
jQuery selectbox 대용으로 사용가능한 jquery popup 플러그인
12428
기타 플래쉬 주변이 점선이 생기는 것을 막아줍니다. 2
12421
jQuery JQuery + wSlide 를 이용한 슬라이딩 6
29292
HTML 시계
12411
기타 CSS hack 정리 9
12402
jQuery JQuery + JQchart + Canvas 로 라인 그래프 그리기 8
27
헉........ 1
29290
HTML 금액입력시 한글로 변환하여 표시 1
12400
Flash [질문] 페이지 인식 시킬때 플래시 테두리 회색라인 1
24
플래쉬파일로 2
12397
PHP 이번 달 달력 출력 2
12396
JavaScript 동적 테이블 추가,삭제
21
서버에러메세지 관련 질문입니다 2
12391
Flash 웹페이지 미리보기 snapshot 활용하기 4
12390
기타 랜덤 배너(가로/세로)를 출력하는 php source
18
php질문좀 하겠습니다. 2
16
듀얼 모니터에서 A모니터와 B모니터 풀화면으로 창을 여는 방법이 없을까요? 1
12377
Flash 쇼핑몰에서 많이 쓰는 자동 슬라이드 12
12373
Flash [질문] 이 책장을 넘기는 효과의 플래시효과는 어떻게 구현하는걸까요? 3
13
소스 syntex error 질문입니다.(초초보) 2
9
소스 php 질문(초초보) 3
12372
Flash 프로그램 소개:: php등 source code library
12371
기타 javascript 로 구현한 php 함수
12363
MySQL 서버에서 mysql euckr과 utf8 같이 사용하기 7
1
어떻게 하면... 7
13432
PHP php5.3 으로 업그레이드 했는데 그누보드가 안뜨네여.. 1
12362
JavaScript vista에서 한글 php 매뉴얼 chm파일이 안 보일&#46468;
12360
기타 홈페이지에 쓸만한 자바스크립트 1
12355
기타 리눅스 실시간 트래픽 모니터링 하기 4
25014
대학교 - 프로그래밍 결과 보고서
29287
HTML 광각렌즈로 촬영한 사진 왜곡현상 보정하기-동영상강좌 2
12352
기타 히스토리 브러쉬를 이용해서 특정부위만 강조-동영상강좌 2
12349
기타 레벨과 블렌딩모드로 노을사진 만들기-동영상강좌 2
29279
HTML 기상청 날씨정보 XML 7
12344
기타 네이버로그인 4
12340
기타 홈페이지에 날씨배너 삽입하기 (케이웨더) 3
12335
기타 xml 연동 웹상에서 이미지 안보일때... 도와주세요 4
12333
기타 자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. 1
12331
기타 자신의 홈피에 통합 검색 순위 (검색어, 음악, 영화, 도서)를 달아보자. 1
29273
HTML 자신의 홈피에 날씨를 달아보자. 5
12330
PHP 세션만을 이용한 현재 접속자. 로케이션 표시
12329
기타 [펌] ant & red5 설치법
12328
MySQL [펌] 리눅스에 java(자바) 와 tomcat(톰켓) 설치
12324
JavaScript 홈피 사진 올리는법 사진줄이 는법 3
12323
MySQL MySQL 자동으로 dump 받기
12318
MySQL 쿼리문 해석좀 부탁드립니다 4
12316
기타 이번주 일~토 날짜 출력~ 1
12313
JavaScript 이미지에 박스 넣기 2
12310
Flash [펌] RED5 파헤치기 2
12309
JavaScript php 파일을 html 확장자로 사용하기
12307
JavaScript 아파치 보안 팁 [외부에서 아파치정보 못 보게하기] 1
12303
기타 리눅스서버 보안팁 [tmp 보안세팅] 3
12296
JavaScript SSH 공격막아내기 방법 1 6
12291
MySQL php 보안팁 [php.ini] - 필수보안 사항 4
12280
Flash 플래시 배너 소스 10
12277
PHP 디렉토리 내의 이미지보기(겔러리) 소스 입니다. 2
12275
MySQL [펌] 사용자 계정 트래픽 제한 하기 1
29272
HTML JavaScript MD5 사용하기~
12274
기타 휠로 이미지 크기 제어
12260
Flash 구글 날씨 api를 이용한 날씨 보여주기 13
12252
기타 무료 설치형 웹하드 큐하드(베타) V1.0 7
12250
MySQL [펌] FTP 서버 보안, 이것만은 꼭 챙깁시다. 1
12248
JavaScript fedora core 3에서 GPG-KEY 를 다운로드 받지 않고 yum update하는 방법 1
29267
HTML ZMLSE(자랩메타로컬검색엔진) 무료소스 4
12245
기타 세션을 기준으로 한 간단한 현재 접속자 2
29266
HTML 드림위버에서 html소스를 최적화시키기
29261
HTML 그림안에 투명텍스트박스 넣기... 4 현재글
12239
Flash 플래시점선없애주는 자바스크립트 5
12238
Flash [질문] 플래시 테두리 제거 질문이요..ㅠㅠ
29251
HTML 숫자 100이하 절사 9
12236
기타 이메일 추출만 하고싶습니다!!!! 1
12231
기타 내사이트에 '네이버 하루 동안 가장 많이 본 뉴스' 를 달자...... 4
12228
기타 답변]버튼클릭하면 무비클립이 나오게 하고싶어요.. 2
12214
정규표현식 [펌] PHP 코드를 최적화하는 40가지 팁 (번역) 13
12211
Flash 플래시무비를 EXPLORE 창에서 한번 클릭 하여야 프리시 버튼이 작동 합니다. 2
12210
MySQL ..)아랫님.. mysql 버젼확인 (SQL문장)..More
29248
HTML 웹컬러(WebColor) 를 RGB 로 변경 2
29247
HTML 유닉스계열의 쉘 명령어 중에 디렉토리 용량을 체크하는 프로그램
25010
사이트 가입 리스트 3
12208
JavaScript file_put_contents() 함수 1
12207
MySQL bash shell의 환경설정 의미와 그 예
12202
MySQL [질문] ssh에서 mysqldump명령어 4
이전 다음
전체 목록