javascript - 基于图像的页面颜色的背景

我正在尝试根据包含图像的div更改背景色。我在Google，Pinterest等上看到了类似的效果，这些颜色在图像之前显示。优选地，不止一种颜色，可能是渐变的。有任何想法吗？谢谢！

最佳答案

这可以通过图像模糊来实现。

.container {
  position:fixed;
  width:200px;
  height:150px;
  border: 1px solid black;
  border-radius: 2px;
  overflow:hidden;
}

.background {
  width: calc(100% + 40px);
  margin-left: -40px;
  margin-top: -40px
  height:calc(100% + 40px);
  position:absolute;
  z-index:-1;
  filter: blur(40px);
}

.foreground {
  border:solid 1px black;
  max-width:150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <img class="background" src="http://neil.computer/stack/bg.jpg" />
  <img class="foreground" src="http://neil.computer/stack/bg.jpg" />
</div>

关于javascript - 基于图像的页面颜色的背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43266263/