具有渐变和图像的背景混合模式

Question

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

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

使用渐变（以及最新支持背景混合模式的Chrome Canary Build）时，不应用混合模式。 但是在使用普通颜色作为背景时应用它，例如rgb(38, 38, 219) url(img/water.png)

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

我想要做的就是将PNG覆盖在渐变上，创造一种我无法实现的效果，例如让PNG具有较小的不透明度或者开始着色PNG。

Answer 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/