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

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/