根据滑块图像更改带有模糊效果的页面背景颜色

Question

是否可以使用JavaScript或CSS获得类似的效果？什么是实现这种效果的最佳方法。

它的作用基本上是根据滑块图像改变页面的背景颜色，具有一些漂亮的模糊效果。

请参阅示例：http://www.gog.com主页滑块。 （我相信他们只是在Photoshop中为每个滑块图像创建背景图像。

http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg

http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg

http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg

Answer 1

这是使用jQuery实现此目的的一种方法。

它使用三个固定位置div，然后它会激活它们的不透明度。

$('button').click(function() {
  var id= 'd' + $(this).text().replace('Background ','');
  $('#d1, #d2, #d3').each(function() {
    $(this).animate({
      opacity: this.id===id ? 1 : 0
    });
  });
});

button {
  position: relative;
}

#d1, #d2, #d3 {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

#d1 {
  background-image: url("http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg");
}

#d2 {
  background-image: url("http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg");
}

#d3 {
  background-image: url("http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg");
}

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

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

<button>Background 1</button>
<button>Background 2</button>
<button>Background 3</button>

Answer 2

$('button').click(function() {
  var id= 'd' + $(this).text().replace('Background ','');
  $('#d1, #d2, #d3').each(function() {
    $(this).animate({
      opacity: this.id===id ? 1 : 0
    });
  });
});

button {
  position: relative;
}

#d1, #d2, #d3 {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

#d1 {
  background-image: url("http://images-1.gog.com/23382bd5e4e5deb7036d68e04286120df2a1d424881fcafb21ecd2c9a5c24ab5_bg_1920.jpg");
}

#d2 {
  background-image: url("http://images-2.gog.com/a88f5d7a5161fb204d2f78adf14eea73e03dde54eb8ab516e50b077dcbb72cba_bg_1920.jpg");
}

#d3 {
  background-image: url("http://images-3.gog.com/ab956772ba01063aadfb8cda56d2e9ed3a6e0abd1534ce94b5f3a524e085656f_bg_1920.jpg");
}

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

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

<button>Background 1</button>
<button>Background 2</button>
<button>Background 3</button>