淡化背景图像淡化该 div 内的内容答案

【问题标题】：fade background image fades content inside that div淡化背景图像淡化该 div 内的内容
【发布时间】：2016-04-30 11:14:01
【问题描述】：

当图像出现时，我试图淡化 div 的背景图像，该 div 内的内容也会淡化，如何停止内容的淡化效果。

JS Fiddle

HTML：

<div id="background">adsdsa</div>

JS：

var bgArr = ["http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p2.jpg"];
var i = 0;

// Start the slide show
var interval = self.setInterval(swapBkgnd, 5000)

function swapBkgnd() {
  if (i > (bgArr.length - 1)) {
    i = 0
   $('#background')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': "url(" + bgArr[i] + ")"})
            .animate({opacity: 1});
    });
  } else {
   $('#background')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': "url(" + bgArr[i] + ")"})
            .animate({opacity: 1});
    });
  }
  i++;
};

CSS：

#background {
  position: absolute;
  min-height: 100%;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果您将内容放入正在褪色的div 中，那么您将无法停止正在褪色的内容。如果您将内容放在div 之外并使用position: absolute; 对齐它，那么您可以实现您想要的目标。看看演示 -

var bgArr = ["http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p2.jpg"];
var i = 0;

// Start the slide show
var interval = self.setInterval(swapBkgnd, 1000)

function swapBkgnd() {
  if (i > (bgArr.length - 1)) {
    i = 0
    $('#background')
      .animate({
        opacity: 0
      }, 'slow', function() {
        $(this)
          .css({
            'background-image': "url(" + bgArr[i] + ")"
          })
          .animate({
            opacity: 1
          });
      });
  } else {
    $('#background')
      .animate({
        opacity: 0
      }, 'slow', function() {
        $(this)
          .css({
            'background-image': "url(" + bgArr[i] + ")"
          })
          .animate({
            opacity: 1
          });
      });
  }
  i++;
};

#background {
  position: absolute;
  min-height: 100%;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
span {
  position: absolute;
  top:0;
  left:0;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
<span>adsdsa</span>

【讨论】：