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

Question

我试图根据它的包含图像来改变div的背景颜色。我在Google，Pinterest等上看到了类似的效果，其中颜色显示在图像之前。优选多于一种颜色，可以作为梯度。有任何想法吗？谢谢！

Answer 1

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

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;