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

Question

我试图根据它包含的图像来改变我的 div 的背景颜色。我在 Google、Pinterest 等网站上看到过类似的效果，其中颜色显示在图像之前。最好是不止一种颜色，可以是渐变色。有任何想法吗？谢谢!

Answer 1

这可以通过图像模糊来完成。

.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="https://i.imgur.com/PHEgdUj.jpeg" />
  <img class="foreground" src="https://i.imgur.com/PHEgdUj.jpeg" />
</div>