배너 불투명도 문의
본문
배너 현재 불투명하게 나오는데, 이를 완전 원본 그대로 나오게 하려면 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 부분
@charset "utf-8";
.lt_bn {position:relative;overflow:hidden}
.lt_bn .bx-wrapper{height:400px}
.lt_bn li{background-position:center center;background-size:cover;background-repeat:no-repeat;height:400px;text-align:center;color:#fff}
.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}
.lt_bn .bn_txt{display:table;height:100%;width:100%;position:relative;z-index:2;}
.lt_bn .bn_txt a{ display : inline-block; width : 100%; height : 100%;}
.lt_bn .txt_wr{display:table-cell;vertical-align:middle;padding:0 20%}
.lt_bn li .bn_tit{font-size:3.8em;font-weight:bold; line-height:1.53em;
-webkit-text-shadow:2px 2px 5px rgba(55,55,55,0.4);
-moz-text-shadow:2px 2px 5px rgba(55,55,55,0.4);
text-shadow: 2px 2px 5px rgba(55,55,55,0.4);}
.lt_bn li .bn_detail{font-size:1.231em;margin:20px 0 20px; line-height:1.7em;
-webkit-text-shadow:2px 2px 5px rgba(55,55,55,0.4);
-moz-text-shadow:2px 2px 5px rgba(55,55,55,0.4);
text-shadow: 2px 2px 5px rgba(55,55,55,0.4);}
.lt_bn li .bn_view {display:inline-block;background:#fff;color:#333;padding:0 35px;line-height:45px;margin-top:20px}
.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}
.lt_bn:hover .bn_link{display:block}
.lt_bn .bn_link:hover {transform: rotate( -45deg );color:#fff;}
.lt_bn .bx-pager{position:absolute;bottom:0;right:0}
.lt_bn li .bn_tit{opacity:0; transform:translateY(30px);
-webkit-transition: all 0.3s ease-in .3s;
-moz-transition: all 0.3s ease-in .3s;
-ms-transition: all 0.3s ease-in .3s;
-o-transition: all 0.3s ease-in .3s;
transition: all 0.3s ease-in .3s}
.lt_bn li .active-slide .bn_tit{opacity:1;
transform:translateY(0)}
.lt_bn li .bn_detail{opacity:0;
-webkit-transition: all 1s ease-in .5s;
-moz-transition: all 1s ease-in .5s ;
-ms-transition: all 1s ease-in .5s;
-o-transition: all 1s ease-in .5s;
transition: all 1s ease-in .5s}
.lt_bn li .active-slide .bn_detail{opacity:1}
.lt_bn li .bn_view{opacity:0;
-webkit-transition: all 1.3s ease-in 1s;
-moz-transition: all 1.3s ease-in 1s;
-ms-transition: all 1.3s ease-in 1s;
-o-transition: all 1.3s ease-in 1s;
transition: all 1.3s ease-in 1s}
.lt_bn li .active-slide .bn_view{opacity:1}
.lt_bn #bx_pager{position:absolute;bottom:20px;right:20px;z-index:99}
.lt_bn #bx_pager a{color:#fff;display:inline-block;padding:5px;line-height:20px;opacity:0.5}
.lt_bn #bx_pager span{display:inline-block;width:0;height:1px;background:#fff;vertical-align:top;margin-top:10px;margin-left:8px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in ;
-ms-transition: all 0.3s ease-in ;
-o-transition: all 0.3s ease-in ;
transition: all 0.3s ease-in }
.lt_bn #bx_pager .active{opacity:1}
.lt_bn #bx_pager .active span{width:20px}
.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}
@media (max-width: 969px){
.lt_bn .bx-wrapper ,.lt_bn li{height:400px}
.lt_bn .bx-controls-direction a{width:30px;height:30px }
.lt_bn .txt_wr{padding:0 40px}
.lt_bn li .bn_tit{font-size:2em;}
.lt_bn .btn_bottom{display:none}
.lt_bn #bx_pager{width:100%;text-align:center;right:0}
}
답변 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 를 지워버리세요~
왜 안될까요..!!!!!
opacity 문제네요 백그라운드속성에도 0.4값이 들어가있네요
혹시 코드 부분 위치 말씀해주실 수 있을까요? 0.4인 부분을 못찾겠습니다ㅠ
주소를 남겨주실 수 있나요?
안녕하세요 조나단님 ㅎ
jsdbmarket.co.kr 입니다!
css 부분을 건드셔도 안되시면 code에서
<div class="bg"></div>
이부분 지우세요
