Question

我需要制作一个带有淡入淡出过渡效果的转盘，该过渡会变成黑色，或者甚至更好一些暗灰色，例如#2B303A。我在网上找到了这段代码，效果很好，唯一的问题是，淡入淡出效果是我不喜欢的非常亮的白色，令人不安。

如何在图像之间使其褪色为黑色？

$(document).ready(function() {

  //Carousel
  var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"];
  var len = vet_url.length;
  var i = 0;

  function swapBackgrounds() {
    $("#background").animate({
      opacity: 0
    }, 700, function() {
      $($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({
        opacity: 1
      }, 700);
    });
    i++;
  }
  setInterval(swapBackgrounds, 10000);
});

#background {
  background-color: #2B303A;
  position: absolute;
  z-index: 1;
  min-height: 100%;
  min-width: 100%;
  background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

View on JSFiddle

Answer 1

至少在测试用例中，您需要在html元素上进行操作。

html
{
 background-color:#2B303A;
}

Answer 2

将不透明度设置为0，可以看到圆盘传送带下面的元素，在这种情况下，除了物体本身，什么都没有。未设置正文的background-color，因此它是默认的白色。将background-color设置为黑色可以解决此问题。

Answer 3

jquery的.animate不能与背景色一起使用，尽管它可以与以下内容一起使用： https://github.com/jquery/jquery-color

渐隐至黑色过渡的图像轮播

3 个答案: