带有渐变和图像的背景混合模式答案

【问题标题】：background-blend-mode with Gradient and Image带有渐变和图像的背景混合模式
【发布时间】：2015-02-26 20:19:45
【问题描述】：

目前我无法将 PNG 图像与 CSS 渲染的渐变混合。代码如下所示：

background: linear-gradient(to right, red , blue), url(img/water.png);
background-blend-mode: overlay;

使用渐变时不应用混合模式（以及支持背景混合模式的最新 Chrome Canary 版本）。然而，当使用纯色作为背景时会应用它，例如rgb(38, 38, 219) url(img/water.png)

这是 CSS 背景混合模式规范的限制还是我做错了什么？

我想要做的就是在渐变上叠加一个 PNG，创建一个我无法实现的效果，例如让 PNG 具有较小的不透明度或对 PNG 进行着色。

【问题讨论】：

来自 docs= 混合模式的定义应与 background-image CSS 属性的顺序相同。. Therefore, change the order of the values of the background` 属性。

标签： css background-image background-blend-mode

【解决方案1】：

应该没问题...也许先尝试添加图像，然后渐变：background: url(img/water.png), linear-gradient(to right, red , blue);

看例子：

.test {
  display: block;
  width: 700px;
  height: 438px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;

background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -webkit-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -moz-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -o-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  linear-gradient(to right, red, blue);
  background-blend-mode: overlay;
  }

编辑：也看看这里：http://css-tricks.com/basics-css-blend-modes/

【讨论】：

先设置确实有帮助。谢谢（：