KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

배너 불투명도 문의

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!
배너 불투명도 문의

QA

배너 불투명도 문의

본문

배너 현재 불투명하게 나오는데, 이를 완전 원본 그대로 나오게 하려면 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

채택됨

야채킴님의 답변

thumb-3730852952_1599096573.4517_730x442.png

 

백그라운드를 주석처리하면 제대로 나오네요.

쿠키 테마 쓰시는것 같으신데 /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값이 들어가있네요
주소복사
답변의 댓글

조나단e님의 답변

주소를 남겨주실 수 있나요?

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 12,714
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT