그래디언트 및 이미지가있는 배경 혼합 모드

Question

현재 PNG 이미지와 CSS 렌더링 그라디언트를 혼합 할 수 없습니다. 코드는 다음과 같습니다

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

블렌드 모드가 적용되지 않는 그라데이션 (가장 최근 크롬 카나리아 배경 - 혼합 모드을 지원하는 빌드)를 사용할 때. rgb(38, 38, 219) url(img/water.png)

CSS 배경 혼합 모드 사양의 제한 사항입니까? 아니면 잘못된 것이 있습니까?

내가 원하는 것은 그라디언트 위에 PNG를 오버레이하여 내가 달성 할 수없는 효과를 만들어내는 것입니다. PNG를 가짐으로써 불투명도가 낮아 지거나 PNG가 색상으로 표시됩니다.

Answer 1

은 아마 첫번째 이미지를 추가하려고 ... 잘되어야, 다음 그라데이션 :

.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; 
    } 

편집 :

background: url(img/water.png), linear-gradient(to right, red , blue);이 예제를 참조하십시오 여기 봐 가지고 : http://css-tricks.com/basics-css-blend-modes/