图像地板淡入淡出颜色与网页的背景颜色混合？

Question

如何设置图像叠加层以匹配网页的背景色？ Here's an example

Answer 1

您可以使用background-blend-mode: overlay;。见下面的例子：

＆＃13;

＆＃13;

.box {
  background-image: url(https://i.stack.imgur.com/pjKxM.jpg);
  height: 300px;
  width: 300px;
  background-color: #5e9bbf;
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;