background-blend-mode with Gradient и Image

Question

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

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

Режим наложения не применяется при использовании Gradient (и самый последний Chrome Canary Строят, который поддерживает фоновое Blend-режим). Тем не менее, применяется при использовании обычного цвета в качестве фона, например rgb(38, 38, 219) url(img/water.png)

Является ли это ограничением спецификации фона фона фона или я что-то не так?

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