背景淡入淡出无法正常工作

Question

不确定这是否可能，但我正在尝试为jquery css更改添加淡入。我也尝试过使用css转换属性，但没有成功。

以下是我所取得的进展，但它不起作用。

HTML:

<section id="primary" class="home-section-hero">
    <div class="bcg" data-anchor-target="#primary">
        <ul>
            <li data-pid="1">
                <img src=“folder/path”>
            </li>
        </ul>
    </div> <!-- .bcg -->
</section> <!-- #primary -->

CSS：

#primary {
    height: 100%;
    width: 100%;
}
#primary .bcg {
    background: url("images/miscreated-bg.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 10px 5px 15px rgba(0, 0, 0, 0.5) inset;
    height: 100%;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5);
    width: 100%;
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

jQuery:

$( "li[data-pid='1'] img" ).click(function() {
    $( "#primary .bcg" ).fadeIn( "slow", function() {
        $(this).css( "background", "url(http://ericbrockmanwebsites.com/dev7/wp-content/themes/AntCas/player-images/bgs/Titanic-bg.jpg) no-repeat fixed center center / cover  rgba(0, 0, 0, 0)");
    });
});

有什么见解吗？

Answer 1

不能将transition设置在2个background-image之间。

您需要将它们放在不同的容器中，例如opacity和z-index可能会褪色：这里是一个例子：http://codepen.io/gcyrillus/pen/DJdja

基础是

body:before, body:after {
  content:'';
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
  z-index:1;
    background-size: cover;
  animation:bgfade 10s infinite;
  animation-direction: alternate;
  opacity:1;
}

使用身体背景，您可以淡入/淡出3种不同的图像。通过js、jQuery或CSS。