Question

我正在尝试淡化div的背景图像，当图像显示内部的内容时，div也会消除如何停止内容的淡化效果。

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

Answer 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>

淡入淡出背景图像淡化div内的内容

1 个答案: