Hintergrund Img Slider in WP Thema - Elternelement Opazität versteckt Inhalt

Question

Ich versuche, einen Hintergrundbild-Slider in einem WP-Thema zu erstellen, ohne tief in den Code-Modus zu gehen. Also schaute ich mich um und fand diese solution.

Was ich bisher tat:

1 - Added eine Id auf eine Zeile in einem visuellen Komponisten

2 - Hinzugefügt diesen CSS zum Thema benutzerdefinierten CSS:

#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 - Laden Sie eine js-Datei hoch, die diese Funktion enthält:

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"))); 
}); 

Und alle funktionieren gut.

Was ist das Problem: wie diese Funktion die Deckkraft von, in diesem Fall, ein Elternelement ändern, das Kindelement (a div) verschwinden auch. So

:

1 - Habe sehe ich in anderen Fragen answer kann ich diese Funktion zu ändern, so dass es mit RGBA statt Undurchsichtigkeit beginnen?

2 - Ich sah in another answer, dass wir dies mit einem Pseudo-Element umgehen könnten, aber ich wusste irgendwie nicht, wie man die Funktion ändert, um so zu arbeiten ... irgendwelche Ideen?

3 - Gibt es einen besseren Weg, dies zu tun?

Danke.

Answer 1

Also nur um des Arguments willen fand ich eine Umgehung in einer response zu einer anderen Frage.

@gibberish Beitrag dieser Code:

$(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 

ich ändern "Körper" nur "#slideshow" und die richtigen Links zu meinen Bildern machen.

Es funktioniert wirklich gut.

Keines der Abschleppwagen-Optionen, die ich gearbeitet posted:

1 - Die RGBA Option - die A haben keinen Einfluss auf das Hintergrundbild.

2 - das Pseudoelement auswählen - Wie Blazemonger sagen in diesem response: nach, da es technisch nicht Teil des DOM ist und daher von jedem JavaScript unzugänglichen:

Sie nicht manipulieren kann.