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

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

e엔시
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 17년 전 · 8598 · 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, 354회)
목록
이전글 다음글

댓글 작성

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

로그인하기

댓글 4개

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

게시글 목록

번호 제목
1005
HTML [SQL]SQL의 기초 (3)
1004
HTML [SQL]SQL의 기초 (2)
1002
HTML [SQL]SQL의 기초 (I) 1
1001
HTML [SQL]DATABASE의 구조
1000
HTML [SQL]Database 시스템 이란?
999
HTML prototype.js 를 이용한 트리형식의 카테고리메뉴
998
HTML 클릭해서 이미지 팝업 뛰우기.
997
HTML 부끄럽네요. 로그인아웃 표시
996
HTML PHP 변수사용법
995
HTML TAR명령. TAR압축묶기 압축풀기
994
HTML 윈도우2003서버 관리
993
HTML 전에 사이트제작할때 사용했던 소스입니다.
987
HTML 제가 그린 일러스트입니다. 5
986
HTML 단축키 사용을 쉽게 도와주는 shortcut.js
984
HTML 텍스트 필드에 숫자 입력시 3자리 단위로 , 찍는 소스 1
982
HTML 클릭하면 이미지 서로 바꾸기. 1
979
HTML html/꼭 알아두어야할 태그 정리 2
978
HTML 메트릭스글자
974
HTML 서버소스교정된 부분,추가된 부분을 비교하면서 작업가능한 프로그램 3
968
HTML 쓸만한 자바스크립트 소스 사이트[외국] 5
967
HTML 두 날짜의 차이를 년월일 시분초로 표현하기
966
HTML [UNIX,LINUX] oracle client 설치하기
965
HTML 심장박동효과
964
HTML 외부 문서 불러오기
963
HTML Flex멀티업로드 & HttpHandler
962
HTML 오라클 SQL 기본 간단 정리
961
HTML 레이어를 클릭하면 순서가 바뀌는거에요
960
HTML 셀렉트 박스 내용을 레이어로 표현
957
JavaScript 구인 구직 사이트 소스에요~ 8
955
HTML Live Clock 스크립트 - 현재 시간
이전 다음
전체 목록