背景WPテーマのImgスライダ - 親要素不透明度のコンテンツを隠す

Question

コードモードで深くすることなく、wpテーマ内に背景画像スライダを作成しようとしています。だから、私は周りを見回し、これを見つけたsolution。私がこれまでにやった

：

1 - テーマカスタムCSSに、このCSSを追加しました - Visual Composerの

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の一部ではありませんので、任意のJavaScriptのことでアクセスできないため。