background-blend-mode с градиентом и изображением

Question

В настоящее время я не могу смешать PNG-изображение с CSS-градиентом. Код выглядит так:

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

Режим наложения не применяется при использовании градиента (и самой последней версии Chrome Canary Build, которая поддерживает режим background-blend-mode). Однако он применяется при использовании простого цвета в качестве фона, такого как rgb(38, 38, 219) url(img/water.png)

Это ограничение спецификации CSS Background-Blend-Mode или я что-то не так делаю?

Все, что я хочу сделать, это наложить 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/