배너 불투명도 문의

배너 불투명도 문의

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값이 들어가있네요

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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,126 | RSS
QA 내용 검색

회원로그인

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