使用渐变和图像的背景混合模式

Question

目前我无法将PNG图像与CSS渲染的渐变混合。

代码如下：

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

使用渐变时，混合模式不会被应用（即使是支持background-blend-mode的最新Chrome Canary Build）。但当使用普通颜色作为背景时，如rgb(38, 38, 219) url(img/water.png)，混合模式会被应用。

这是CSS Background-Blend-Mode规范的限制还是我做错了什么？

我想要做的就是在渐变上叠加PNG图像，创造一些效果，而这些效果无法通过让PNG图像具有较低的透明度或对其进行着色来实现。

- Adrian MK

---

从文档中可以看到，混合模式应该按照 background-image CSS 属性的顺序进行定义。因此，请更改 background 属性值的顺序。 - Bram Vanroy

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/

（注：此处为原文，已排版好，无需翻译）

- LorDex

---

设置它确实有帮助。谢谢 (: - Adrian MK