如何创建一个与图像颜色相匹配的透明渐变？

Question

我想创建一个渐变来选择图像的基本颜色，并创建一个合适的叠加渐变，使其与图像有些匹配。

喜欢这个网站：https://www.themoviedb.org/tv/69050-riverdale

Answer 1

您可以使用CSS background-blend-mode。

What is that?

以下是使用screen过滤器的背景混合模式示例：

body, html {
  height: 960px;
  width: 640px;
  margin: 0;
}

body {
  background-color: #3EA8E2;
  background-image: url(https://i.imgur.com/OUzUdxe.jpg);
  background-size: 640px 960px;
  background-repeat: no-repeat;
  background-blend-mode: screen;
}

body:hover {
  background-blend-mode: normal;
}