배너 불투명도 문의 채택완료
배너 현재 불투명하게 나오는데, 이를 완전 원본 그대로 나오게 하려면 optical 을 수정해야될지 색상을 지정해야될지 수정 고민입니다.
배너
[code
<!-- <?php echo $bo_subject; ?> 최신글 시작 { -->
<div class="lt_bn">
<ul>
<?php
for ($i=0; $i<count($list); $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
if($thumb['ori']) {
$img = $thumb['ori'];
} else {
$img = G5_IMG_URL.'/no_img.png';
$thumb['alt'] = '이미지가 없습니다.';
}
?>
<li class="list_<?php echo $i ?>" style="background-image:url('<?php echo $img; ?>')">
<div class="bg"></div>
<div class="bn_txt">
<div class="txt_wr">
<?php
echo "<div class=\"bn_tit\">";
echo $list[$i]['subject'];
echo "</div>";
?>
<div class="bn_detail pc_view"> <?php echo get_text(cut_str(strip_tags($list[$i]['wr_content']), 50), 1); ?></div>
<?php if ($list[$i]['wr_link1']) { ?>
<a href="<?php echo $list[$i]['wr_link1']; ?>" class="bn_view">VEIW</a>
<?php } ?>
</div>
</div>
</li>
<?php } ?>
<?php if (count($list) == 0) { //게시물이 없을 때 ?>
<li class="empty_li">게시물이 없습니다.</li>
<?php } ?>
</ul>
<?php if ($is_admin) { ?><a href="<?php echo get_pretty_url($bo_table); ?>" class="bn_link"><i class="fa fa-cog"></i><span class="sound_only"><?php echo $bo_subject ?></span></a> <?php } ?>
<div id="bx_pager">
<?php
for ($i=0; $i<count($list); $i++) {
$i1 = $i1 + 1;
?>
<a data-slide-index="<?php echo $i ?>" href="">0<?php echo $i1 ?><span></span></a>
<?php
} ?>
<?php if (count($list) == 0) { //게시물이 없을 때 ?>
<?php } ?>
</div>
<button type="button" class="btn_bottom">아래로</button>
</div>
<script>
$('.lt_bn ul').show().bxSlider({
pagerCustom: '#bx_pager',
controls:false,
auto:true,
pause: 8000,
speed: 800,
onSliderLoad: function () {
$('.lt_bn .bn_txt').eq(1).addClass('active-slide');
$(".bn_txt.active-slide").addClass("test");
},
onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
//console.log(currentSlideHtmlObject);
$('.active-slide').removeClass('active-slide');
$('.lt_bn .bn_txt').eq(currentSlideHtmlObject + 1).addClass('active-slide');
$(".bn_txt.active-slide").addClass("test");
},
onSlideBefore: function () {
$(".bn_txt.active-slide").removeClass("test");
$(".one.bn_txt.active-slide").removeAttr('style');
}
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.lt_bn ul li').css('background-position',"0 "+ (scrolled * 1 ) + 'px');
}
$(window).scroll(function(){
parallax();
});
jQuery(document).ready(function($) {
$(".btn_bottom").on("click", function() {
var position=$('#index').offset(); // 위치값
$('html,body').animate({scrollTop:position.top},400); // 이동
});
});
</script>
[/code]
css 부분
</p>
<p>@charset "utf-8";</p>
<p>.lt_bn {position:relative;overflow:hidden}</p>
<p>.lt_bn .bx-wrapper{height:400px}</p>
<p>.lt_bn li{background-position:center center;background-size:cover;background-repeat:no-repeat;height:400px;text-align:center;color:#fff}</p>
<p>.lt_bn .bg{;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);content:'';z-index:1;overflow:hidden}</p>
<p> </p>
<p>.lt_bn .bn_txt{display:table;height:100%;width:100%;position:relative;z-index:2;}</p>
<p>.lt_bn .bn_txt a{ display : inline-block; width : 100%; height : 100%;}</p>
<p> </p>
<p>.lt_bn .txt_wr{display:table-cell;vertical-align:middle;padding:0 20%}</p>
<p> </p>
<p>.lt_bn li .bn_tit{font-size:3.8em;font-weight:bold; line-height:1.53em;</p>
<p>-webkit-text-shadow:2px 2px 5px rgba(55,55,55,0.4);</p>
<p>-moz-text-shadow:2px 2px 5px rgba(55,55,55,0.4);</p>
<p>text-shadow: 2px 2px 5px rgba(55,55,55,0.4);}</p>
<p>.lt_bn li .bn_detail{font-size:1.231em;margin:20px 0 20px; line-height:1.7em;</p>
<p>-webkit-text-shadow:2px 2px 5px rgba(55,55,55,0.4);</p>
<p>-moz-text-shadow:2px 2px 5px rgba(55,55,55,0.4);</p>
<p>text-shadow: 2px 2px 5px rgba(55,55,55,0.4);}</p>
<p>.lt_bn li .bn_view {display:inline-block;background:#fff;color:#333;padding:0 35px;line-height:45px;margin-top:20px}</p>
<p> </p>
<p>.lt_bn .bn_link{display:none;position:absolute;bottom:10px;right:10px;z-index:99;background:#ff0000;color:#fff;width:40px;line-height:40px;border-radius:30px;text-align:center;font-size:16px}</p>
<p>.lt_bn:hover .bn_link{display:block}</p>
<p>.lt_bn .bn_link:hover {transform: rotate( -45deg );color:#fff;}</p>
<p> </p>
<p>.lt_bn .bx-pager{position:absolute;bottom:0;right:0}</p>
<p>
</p>
<p>.lt_bn li .bn_tit{opacity:0; transform:translateY(30px);</p>
<p>-webkit-transition: all 0.3s ease-in .3s;</p>
<p>-moz-transition: all 0.3s ease-in .3s;</p>
<p>-ms-transition: all 0.3s ease-in .3s;</p>
<p>-o-transition: all 0.3s ease-in .3s;</p>
<p>transition: all 0.3s ease-in .3s}</p>
<p>.lt_bn li .active-slide .bn_tit{opacity:1;</p>
<p>transform:translateY(0)}</p>
<p> </p>
<p>.lt_bn li .bn_detail{opacity:0;</p>
<p>-webkit-transition: all 1s ease-in .5s;</p>
<p>-moz-transition: all 1s ease-in .5s ;</p>
<p>-ms-transition: all 1s ease-in .5s;</p>
<p>-o-transition: all 1s ease-in .5s;</p>
<p>transition: all 1s ease-in .5s}</p>
<p>.lt_bn li .active-slide .bn_detail{opacity:1}</p>
<p> </p>
<p>.lt_bn li .bn_view{opacity:0;</p>
<p>-webkit-transition: all 1.3s ease-in 1s;</p>
<p>-moz-transition: all 1.3s ease-in 1s;</p>
<p>-ms-transition: all 1.3s ease-in 1s;</p>
<p>-o-transition: all 1.3s ease-in 1s;</p>
<p>transition: all 1.3s ease-in 1s}</p>
<p>.lt_bn li .active-slide .bn_view{opacity:1}</p>
<p> </p>
<p>.lt_bn #bx_pager{position:absolute;bottom:20px;right:20px;z-index:99}</p>
<p>.lt_bn #bx_pager a{color:#fff;display:inline-block;padding:5px;line-height:20px;opacity:0.5}</p>
<p>.lt_bn #bx_pager span{display:inline-block;width:0;height:1px;background:#fff;vertical-align:top;margin-top:10px;margin-left:8px;</p>
<p>-webkit-transition: all 0.3s ease-in;</p>
<p>-moz-transition: all 0.3s ease-in ;</p>
<p>-ms-transition: all 0.3s ease-in ;</p>
<p>-o-transition: all 0.3s ease-in ;</p>
<p>transition: all 0.3s ease-in }</p>
<p>.lt_bn #bx_pager .active{opacity:1}</p>
<p>.lt_bn #bx_pager .active span{width:20px} </p>
<p>.lt_bn .btn_bottom{position:absolute;bottom:0;left:50%;width:81px;height:37px;background:url('./btn_bottom.png');border:0;margin-left:-40px;text-indent:-999px;overflow:hidden}</p>
<p> </p>
<p> @media (max-width: 969px){</p>
<p> .lt_bn .bx-wrapper ,.lt_bn li{height:400px}</p>
<p> .lt_bn .bx-controls-direction a{width:30px;height:30px }</p>
<p> .lt_bn .txt_wr{padding:0 40px}</p>
<p> .lt_bn li .bn_tit{font-size:2em;}</p>
<p> .lt_bn .btn_bottom{display:none}</p>
<p> .lt_bn #bx_pager{width:100%;text-align:center;right:0}</p>
<p> }</p>
<p>답변 5개
백그라운드를 주석처리하면 제대로 나오네요.
쿠키 테마 쓰시는것 같으신데 /theme/cookie/mobile/skin/latest/banner/style.css에서 수정 가능합니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
css부분 올려주신거에서 4번째
.lt_bn .bg{;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);content:'';z-index:1;overflow:hidden}
요기에서 background 를 지워버리세요~
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
jsdbmarket.co.kr 입니다!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인