基于图像的页面颜色背景

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="http://neil.computer/stack/bg.jpg" />
  <img class="foreground" src="http://neil.computer/stack/bg.jpg" />
</div>

基于图像的页面颜色背景

Background of page colors based on an image

javascript

css

jquery

background-color