WP 테마의 배경 Img 슬라이더 - 부모 요소의 불투명도가 내용을 숨김

Question

코드 모드에서 자세히 살펴 보지 않고 wp 테마 안에 배경 이미지 슬라이더를 만들려고합니다. 그래서 나는 주변을 둘러 보았고 이것을 발견했습니다 solution. 내가 지금까지 무슨 짓을

:

1 - 테마 사용자 정의 CSS이 CSS를 추가 - 비주얼 작곡가

2의 행에 ID를 추가 :

#slideshow { 
    width: 100%; 
    height: 100%; 
    display: block; 
    opacity: 0.0; 
    background-color: #000; 
    /* 
    set background images as `url(/path/to/image)` here, 
    separated by commas 
    */ 
    background-image: url("http://lorempixel.com/400/400/cats/?1"), 
    url("http://lorempixel.com/400/400/animals/?2"), 
    url("http://lorempixel.com/400/400/nature/?3"), 
    url("http://lorempixel.com/400/400/technics/?4"), 
    url("http://lorempixel.com/400/400/city/?5"); 
    background-size: cover, 0px, 0px, 0px; 
/* set transtitions at 3000ms 
    -webkit-transition: background-image 3000ms linear; 
    -moz-transition: background-image 3000ms linear; 
    -ms-transition: background-image 3000ms linear; 
    -o-transition: background-image 3000ms linear; 
    transition: background-image 3000ms linear; 
    */ 
} 

3 - 이 함수가 포함 된 js 파일을 업로드하십시오.

jQuery(function($) { 
    // set `$.fx.interval` at `0` 
    $.fx.interval = 0; 
    (function cycleBgImage(elem, bgimg) { 
// `elem`:`#slideshow:after` 
// set, reset, delay to `1000` after background image reset 
elem.css("backgroundImage", bgimg) 
    // fade in background image 
    .fadeTo(3000, 1, "linear", function() { 
    // set `delay` before fadeing out image 
    // fade in background image   
    $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() { 
     // split background image string at comma , creating array 
     var img = $(this).css("backgroundImage").split(","), 
     // concat first background image to `img` array, 
     // remove first background image from `img` array 
     bgimg = img.concat(img[0]).splice(1).join(","); 
     // recursively call `cycleBgImage` 
     cycleBgImage(elem, bgimg); 
    }); 
    }); 
    }($("#slideshow"))); 
}); 

그리고 모두 잘됩니다.

무엇이 문제입니까?이 함수는이 경우 불투명도를 부모 요소로 변경하므로 자식 요소 (div)도 사라집니다.

그래서 :

1 - 나는 다른 질문에서 본 적이 answer 그 RGBA 대신 불투명도를 사용하기 때문에 나는이 기능을 변경할 수 있습니까?

2 - 나는 another answer에서 의사 요소로이 문제를 해결할 수 있다고 보았습니다. 그러나 나는 그런 식으로 작동하도록 함수를 변경하는 방법을 모릅니다. 어떤 아이디어입니까?

3 - 더 좋은 방법이 있나요?

감사합니다.

Answer 1

그래서 인수를 위해 response에 다른 해결 방법이 있습니다.

후 gibberish @ 코드 :

$(document).ready(function() { 
    var cnt=0, bg; 
    var $body = $('body'); 
    var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg']; 

    var bgrotater = setInterval(function() { 
     if (cnt==5) cnt=0; 
     bg = 'url("' + arr[cnt] + '")'; 
     cnt++; 
     $body.css('background-image', bg); 
    }, 1000); 

    //To stop the backgrounds from rotating. Note the critical step above 
    //of assigning the setInterval function to a variable, in order to 
    //use it again (below) to stop the repeating function 
    $('#some_button_id').click(function() { 
     clearInterval(bgrotater); 
    }); 

}); //END document.ready 

난 그냥이 "#slideshow"를 "몸"을 변경하고 내 이미지에 대한 올바른 링크를 확인하십시오.

정말 훌륭합니다.

나도이 일 게시 된 견인 옵션의 :

- 1 RGBA 옵션 -는 A는 배경 이미지에 영향을 미치지 않습니다.

2

- 의사 요소를 선택하면 - Blazemonger으로이 response의 말 : 당신은 조작 할 수

: 후,이 자바 스크립트에 의해 액세스 할 수없는 때문에 기술적으로 DOM의 일부가 아니다 때문.