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

【问题标题】：How to create a transparent gradient that fits together with color of the image?如何创建与图像颜色相匹配的透明渐变？
【发布时间】：2018-05-16 19:08:00
【问题描述】：

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

在本网站点赞：https://www.themoviedb.org/tv/69050-riverdale

【问题讨论】：

标签： html css gradient

【解决方案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;
}

【讨论】：