최근게시물을 갤러리로 노출했습니다.
근데 이미지위에 반투명을오 제목을 노출시키고 싶은데 이건 어떻게 해야되나요?
좀 알려주세요 
답변 4개 / 댓글 1개
css 는
.img_set span {
position: absolute;
z-index: 999;
color: #fff;
background-color: #000;
opacity: 0.6;
padding: 5px 0 5px 12px;
width: 202px;
height: 30px;
margin-top: -40px;
} 추가 해주시고 (올려주신 라인의 18라인 이후에 (반영해보니 이상해서 수정함))
텍스트 출력을 위해
<div class="img_set">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $imgwidth, $imgheight);
if($thumb['src']) {
$img_content = '<img class="img_left" src="'.$thumb['src'].'" alt="'.$list[$i]['subject'].'" width="'.$imgwidth.'" height="'.$imgheight.'">';
} else {
$img_content = 'NO IMAGE';
}
echo $img_content;
echo "<span>".$list[$i]['subject]."</span>";
?>
</a>
</div>
붉은색 글씨 추가해주세요.
답변에 대한 댓글 1개
이걸 프로그램상에서 뿌려지게 할려면 어떻게 해야되나요?
해당소스는
<?phpif (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가include_once(G5_LIB_PATH.'/thumbnail.lib.php');$imgwidth = 214; //표시할 이미지의 가로사이즈$imgheight = 207; //표시할 이미지의 세로사이즈?><style>#oneshot { position:relative;margin:0 0 0 -5px;}#oneshot .la_title{position:absolute; left:0; top:0; z-index:100; background:#000; padding:5px; font-size:1em; color:#fff;margin:0 0 0 5px;filter:alpha(opacity=50);opacity:.5;}#oneshot .img_set{width:<?php echo $imgwidth ?>px; height:<?php echo $imgheight ?>px; background:#fafafa;padding:0;}#oneshot .subject_set{width:<?php echo $imgwidth - 13 ?>px; padding:-1px 10px 10px 0px; z-index:1; bottom:0; left:0; }#oneshot .subject_set .sub_title{color:#333;height:17px;overflow:hidden;padding:3px 0 0 0;font-size:1.2em;font-family:NanumBarunGothic,dotum;}#oneshot .subject_set .sub_content{color:#8c8a8a;height:30px;overflow:hidden;padding:3px 0 0;font-family:NanumGothic,dotum;}#oneshot ul {list-style:none;clear:both;margin:0;padding:0;}#oneshot li{float:left;list-style:none;text-decoration:none;padding:0 0 0 5px}.subject_set a:link, a:visited {color:#333;text-decoration:none}.subject_set a:hover, a:focus, a:active {color:#e60012;text-decoration:none}/* 폰트불러오기 */@font-face {font-family:'NanumBarunGothic';src: url('<?php echo $latest_skin_url ?>/NanumBarunGothic.eot');}@font-face {font-family:'NanumGothic';src: url('<?php echo $latest_skin_url ?>/NanumGothic.eot');}</style><div id="oneshot"> <div class="la_title"><?php echo $bo_subject ?></div> <ul> <?php for ($i=0; $i<count($list); $i++) { ?> <li> <div class="img_set"> <a href="<?php echo $list[$i]['href'] ?>"> <?php $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $imgwidth, $imgheight); if($thumb['src']) { $img_content = '<img class="img_left" src="'.$thumb['src'].'" alt="'.$list[$i]['subject'].'" width="'.$imgwidth.'" height="'.$imgheight.'">'; } else { $img_content = 'NO IMAGE'; } echo $img_content; ?> </a> </div> <div class="subject_set"> <!--<div class="sub_title"><a href="<?php echo $list[$i]['href'] ?>"><?php echo cut_str($list[$i]['subject'], 23, "..") ?></a></div> <div class="sub_content"><?php echo get_text(cut_str(strip_tags($list[$i][wr_content]), 65, '...' )) ?></div>--> </div> </li> <?php } ?> </ul></div>
보이는건 대략 이렇게 보일거예요
해당 홈페이지 가서 개발자도구로 대충 해봤는데..
이렇게 하면 되지 않을까 싶네요
ex)
<div class="img_set"> <a href="http://shownent3.cafe24.com/bbs/board.php?bo_table=0301&wr_id=4"> <img class="img_left" src="http://shownent3.cafe24.com/data/file/0301/thumb-1889215889_WTknFYPp_PALACE-bleu_214x207.jpg" alt="dddd" width="214" height="207" title=""> <span style=" position: relative; z-index: 999; top: -15%; color: #fff; background-color: #000; opacity: 0.6; padding: 15px 40px 15px 40px;">엘레강스한 아이템</span> </a> </div>
답변을 작성하려면 로그인이 필요합니다.